はじめに
システム構成図やクラウドアーキテクチャ図を書くとき、こんなことはありませんか？
- 図を更新するたびに PowerPoint や draw.io の位置調整に時間が溶ける
- README、設計書、提案資料で同じような図を何度も作り直す
- 図の差分が Git でレビューしづらい
- Excalidraw で編集したいけど、最初の下書きはコードから生成したい
- SVG、PowerPoint、Excalidraw を同じソースから作りたい
このあたりを解決したくて、.xal という XML 風 DSL からアーキテクチャ図を生成する CLI、xaligo を作ってみました。
作ったもの
xaligo は、アーキテクチャ図向けの Diagram as Code ツールです。
.xal でシステム構成を記述し、CLI から複数フォーマットに出力できます。
現在対応している主な出力形式は次の通りです。
- SVG
- Excalidraw
- PowerPoint
- Isoflow
既存ツールと何が違うの？
-
図をコードで管理できる
GUI ツールでは差分が見づらくなりがちですが、xaligo はテキストで図を書くため、Git で変更を追いやすいです。 -
アーキテクチャ図の構造を書きやすい
Account、Region、VPC、Subnet などの入れ子構造を、そのまま図の構造として表現できます。 -
グリッドで配置を調整できる
要素をグリッド上に配置できるため、自動レイアウト任せではなく、意図した構成に近づけやすいです。 -
矢印や線のルートを調整できる
接続関係だけでなく、矢印の向きや経路を指定できるため、複雑な構成図でも線を整理しやすいです。 -
複数形式に出力できる
同じ.xalから SVG / Excalidraw / PowerPoint を生成できます。 -
資料化しやすい
PowerPoint 出力では、A4 / A3 / Letter などの用紙サイズに合わせられます。
xaligo は、アーキテクチャ図をコードで管理しつつ、グリッド配置と矢印調整で「それっぽい図」ではなく「意図した構成図」に近づけるためのツールです。
ドキュメント
mdBook でドキュメントも用意しています。
DSL の基本、CLI の使い方、レンダリング形式、サンプル、アイコンリファレンスなどをまとめています。
サンプルページでは、.xal のコードと SVG プレビューをタブで切り替えて見られるようにしています。
生成AI / コーディングエージェント向けページ
xaligo は Diagram as Code のツールなので、生成AIやコーディングエージェント用のページも用意しました。
このページには、次のような情報をまとめています。
- 最初に読むべきドキュメントの順番
-
.xal -> parser -> layout -> shared scene/plan -> encoderという基本パイプライン - 重要なディレクトリ構成
- サンプルファイルの場所
- よく使う検証コマンド
- 実装時に守ってほしいルール
人間向けの詳細ドキュメントとは別に、AI が短時間で文脈を拾いやすい索引ページとして作っています。
VS Code 拡張
VS Code 拡張もあります。
.xal をエディタで書きながら扱いやすくするための拡張です。
おわりに
AIと共に作業しながら、細かい制御ができるツールを目指していきます。
まだ発展途上ですが、ご興味があればぜひ触ってみてください。