Sugata — XML-first Sugata Diagram Editor for VS Code
XMLファイルをSingle Source of Truthとして、ダイアグラムの可視化・GUI編集ができるVS Code拡張。
機能
- シーケンス図・クラス図 のSVG描画
- ドラッグによるレイアウト編集（ノード移動・ライフライン移動）
- クリック選択でプロパティパネルに詳細表示・編集
- メッセージ追加（ライフライン選択後、アンカー矢印をドラッグ）
- XMLとGUIの双方向編集（VS CodeのUndo/Redoに対応）
- CLIバリデーター（LLMによるXML生成ワークフローに対応）
セットアップ
npm install
npm run compile
VS Codeで F5 を押してExtension Development Hostを起動し、.sgt.xml ファイルを開く。
Claude Codeで新規ダイアグラムを作成する
SugataはClaude Codeと組み合わせて使うことで、自然言語からダイアグラムを生成できる。
1. 事前準備（初回のみ）
npm run compile
2. Claude Codeにダイアグラム作成を依頼する
Claude Codeのチャットで以下のように依頼する。
ログイン処理のシーケンス図を作成して。
ライフラインは User, LoginUI, AuthService, UserDB の4つ。
sample/sequence/login.sgt.xml を参考にして、
docs/spec/xml-format.md の仕様に従ってXMLを生成し、
out/cli/validate.js でエラーが出なくなるまで修正してから
my-diagram.sgt.xml に保存して。
Claude Codeは内部でこの手順を実行する:
docs/spec/xml-format.md と sample/ を読み込んでXMLを生成node out/cli/validate.js my-diagram.sgt.xml でバリデーション- エラーがあればXMLを修正して再バリデーション
- エラーが0件になったらファイルに保存
3. VS Codeで開く
保存されたファイルをVS Codeで開くとSugataが自動的に描画する。
Sugata: Create New Diagram （コマンドパレット）
またはファイルエクスプローラーで .sgt.xml をダブルクリック。
4. GUIで微調整する
- ヘッダーをドラッグ → ライフライン移動
- ライフラインをクリック → アンカー矢印 ◀▶ が表示される
- アンカー矢印を別のライフラインにドラッグ → メッセージを追加
- メッセージをクリック → プロパティパネルでmessageSort・引数を編集
CLIバリデーター単体で使う
ファイル指定
node out/cli/validate.js path/to/diagram.sgt.xml
標準入力
cat diagram.sgt.xml | node out/cli/validate.js --stdin
出力形式（JSON）
{
"errors": [
{
"code": "UNRESOLVED_REF",
"message": "message \"Message:1\" receiveOccurrence \"o99\" not found",
"path": "/semantic/elements/messages/message[@id='Message:1']"
}
],
"warnings": []
}
errors が空配列 → 受理可能（exit code 0）errors が1件以上 → 受理不可（exit code 1）
エラーコード
| code |
内容 |
PARSE_ERROR |
XML構文エラー |
DUPLICATE_ID |
id属性の重複 |
UNRESOLVED_REF |
参照先のidが存在しない |
MISSING_LAYOUT |
<layout>要素がない（error） / layoutエントリ未登録（warning） |
ファイル形式
拡張子: .sgt.xml
<sugata version="1.0">
<sequenceDiagram name="ログイン処理" version="1.0">
<semantic>
<lifelines>
<lifeline id="Lifeline:User" name="User"/>
</lifelines>
<interactions/>
</semantic>
<layout>
<lifeline ref="Lifeline:User" x="100"/>
</layout>
</sequenceDiagram>
</sugata>
詳細仕様: docs/spec/xml-format.md
ドキュメント
