PlantUML をブラウザで書いて図にする
PlantUML はクラス図や配置図のような構造の図をテキストで書く記法です。Java も作図ツールも入れずに、このページのエディタで書いてそのまま図にできます。
書き方
クラス図
```plantuml
@startuml
class Document {
+title: string
+save(): void
}
class Revision
Document "1" o-- "*" Revision
@enduml
```@startuml と @enduml で囲んだ範囲が 1 枚の図になります。o-- は集約、"1" "*" は多重度です。属性とメソッドはクラスの波括弧の中へ並べます。
シーケンス図
```plantuml
@startuml
actor User
User -> Editor: write the body
Editor -> Storage: keep a draft
Storage --> Editor: saved at
@enduml
```-> が実線の呼び出し、--> が破線の応答です。actor を宣言した名前だけが人型で描かれ、宣言していない名前は箱で描かれます。
このエディタでできること
本文の中に図を置く
図は Markdown 本文の plantuml コードブロックです。文章と一緒に 1 つのファイルへ収まります。
外部へ送る前に確認する
PlantUML の描画は外部サーバー（plantuml.com）が行います。図のコードを送る前に確認を求めるので、送るかどうかはあなたが決めます。
標準の Markdown として持ち出す
書いたものは普通の Markdown です。ダウンロードして手元の PlantUML でも同じ図を描けます。
よくある質問
Java や作図ツールの導入は必要ですか。
不要です。ブラウザだけで書けます。
図はどこで描かれますか。
外部サーバー（plantuml.com）です。図のコードがインターネットを通って送られるため、送信の前に必ず確認を求めます。承認しない限り送られません。
Mermaid とどちらを使うべきですか。
クラス図・配置図のように構造を厳密に描くなら PlantUML、流れや会話を手早く描くなら Mermaid が書きやすいです。どちらも同じ本文の中に混ぜて置けます。
この記法をそのまま試せます。
エディタを開く