How to
PlantUML 記法の下書きとプレビュー確認を同じ画面で進めるためのツールです。シーケンス図やクラス図の構造を確認したい時に向いています。テーマ切り替えと複数ページ管理にも対応しているため、図の比較や下書き整理にも使えます。
Use Cases
Capabilities
Guide
設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。
01 HOWTO
左側の入力欄で PlantUML 記法を書きます。テンプレートで図の種類を選び、入力内容に合う補完候補を追加しながら、右側のプレビューで構造を確認できます。
シーケンス図、クラス図、状態遷移図などの PlantUML 記法を入力できます。
空の状態では、図の種類を選んで @startuml から @enduml までの基本構成を挿入できます。
図の種類に合わせて、参加者、メッセージ、クラス、関連などの候補をカーソル位置へ追加できます。
構文に問題がある場合は、プレビュー側の表示を見ながら修正できます。
02 HOWTO
入力欄の上にあるテンプレートと補完候補、上部の履歴、入力欄右上のクリアとコピーを使って編集を進めるエリアです。図の土台作成、部品追加、下書きの再利用をここで操作できます。
シーケンス図、クラス図、状態遷移図などの土台を選んで入力欄へ入れられます。
参加者、メッセージ、クラス、関連など、現在の記法に合う部品を追加できます。
入力内容はブラウザに下書きとして残り、履歴から直前の編集状態へ戻せます。
現在の記法を消して、新しい図を作り直せます。
編集途中の記法を README や仕様書へ貼り付けられます。
03 HOWTO
右側で描画結果を確認し、テーマを切り替えて共有先に近い見え方を選びます。図が描画できない場合はエラー表示もここで確認します。
背景や線色の見え方を変えて、共有先に合う表示を選べます。
入力した記法が期待どおりの図になっているか確認できます。
構文や描画に問題がある場合はエラーを見て修正できます。
プレビュー結果を見ながら記法を修正できます。
04 HOWTO
プレビュー上部の出力操作で、SVG / PNG の形式を選び、図をコピーまたはダウンロードします。出力できない場合はエラー表示を確認して入力へ戻ります。
SVG または PNG を選び、共有先や貼り付け先に合う形式へ切り替えられます。
描画した図を選択中の形式でコピーし、ドキュメントやチャットへ貼り付けられます。
描画した図を SVG または PNG ファイルとして保存できます。
図の元になる記法も一緒に共有できます。
出力できない場合はエラー内容を見て原因を切り分けられます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
要素を一度に増やすと、構文ミスと接続ミスの切り分けが難しくなります。まずは短いシーケンスやクラス関係だけで表示を確認すると進めやすいです。
確認すること
編集前提なら SVG、チャットや資料へ貼るなら PNG というように、出力形式を先に決めると手戻りが減ります。
確認すること
PlantUML のプレビューはネットワーク接続が必要です。接続がない場合はプレビューが表示されません。オフライン環境では使えません。
FAQ
使う前に判断しやすい質問を先に整理します。
PlantUML 記法を前提に UML 図を扱いたい時に向いています。Mermaid とは別の記法として、文書ごとに切り替えて使えます。
プレビュー engine の接続状況に応じて SVG と PNG のコピーや保存に対応します。未接続時はプレビュー面にエラーを表示します。
シーケンス図、クラス図、状態遷移図、ユースケース図、ガントチャートなど PlantUML の主要な図に対応しています。
PlantUML の公式ドキュメントに種類別の記法が記載されています。このページで記法を入力しながら図を確認できます。
SVG または PNG でダウンロードするかクリップボードにコピーして共有してください。
PlantUML のプレビューは外部サーバーへの接続が必要です。接続がない場合はプレビューが表示されません。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
