PlantUML

PlantUML の記法で作成した図をコンテンツ内で扱うための Plugin です。

導入

npm install @riebeckite/plugin-plantuml

Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は riebeckite.config.ts の plugins に登録して利用します。

PlantUML のコードブロックを使って、シーケンス図などを記事と一緒に管理できます。

```plantuml
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi
@enduml
```

PlantUML のコードブロックは、ビルド時に PlantUML サーバーの画像 URL を指す <img> として出力されます。図の表示には、閲覧時にそのサーバーへ到達できる必要があります。

この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。

設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは Plugin System、Plugin を作る場合は Writing a Plugin を参照してください。

1 changesCollapseExpand

From To

	1	`+ # PlantUML`
	2	`+`
	3	`+ PlantUML の記法で作成した図をコンテンツ内で扱うための Plugin です。`
	4	`+`
	5	`+ ## 導入`
	6	`+`
	7	+ ```bash
	8	`+ npm install @riebeckite/plugin-plantuml`
	9	+ ```
	10	`+`
	11	+ Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は `riebeckite.config.ts` の `plugins` に登録して利用します。
	12	`+`
	13	`+ ## 使用例`
	14	`+`
	15	`+ PlantUML のコードブロックを使って、シーケンス図などを記事と一緒に管理できます。`
	16	`+`
	17	+ ````markdown
	18	+ ```plantuml
	19	`+ @startuml`
	20	`+ Alice -> Bob: Hello`
	21	`+ Bob --> Alice: Hi`
	22	`+ @enduml`
	23	+ ```
	24	+ ````
	25	`+`
	26	+ PlantUML のコードブロックは、ビルド時に PlantUML サーバーの画像 URL を指す `<img>` として出力されます。図の表示には、閲覧時にそのサーバーへ到達できる必要があります。
	27	`+`
	28	`+ ## 使いどころ`
	29	`+`
	30	`+ この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。`
	31	`+`
	32	`+ ## 詳細仕様`
	33	`+`
	34	`+ 設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは [Plugin System](../framework/plugin-system.md)、Plugin を作る場合は [Writing a Plugin](./writing-a-plugin.md) を参照してください。`
	35	`+`
	36	`+`