- oxdraw は Rust で書かれた 「Diagram as Code」ツールで、コードベースのダイアグラムを視覚的に編集し、再現可能な形で維持できるよう設計されている
- ダイアグラムは Mermaid 構文で記述され、Web インターフェースを通じてノード位置、色、接続線などを ドラッグで調整できる
- 視覚的な修正内容は Mermaid ファイル内のコメント形式で保存され、他の Mermaid ツールとの互換性を維持する
- CLI と React ベースの Web エディタで構成されており、コマンドラインレンダリングとリアルタイム編集モードの両方をサポート
- コード生成型ダイアグラムの生産性と視覚編集の自由度を組み合わせた、Lucidchart のような GUI ツールの代替として注目されている
プロジェクト概要
- oxdraw の目標は、宣言的で再現可能な構文を通じて 高品質なダイアグラムを簡単に生成・維持すること
- ダイアグラムは Mermaid 構文で記述し、視覚的な調整は Web インターフェースで行う
- ユーザーが視覚的に加えた修正は元のコードに反映され、バージョン管理と自動化が可能
- 修正内容は Mermaid ファイル内の コメント(comment) 形式で記録され、Mermaid エコシステムの他ツールとの 完全な互換性を維持
- リポジトリは Rust ベースの CLI と React ベースの Web インターフェースで構成されており、CLI は
.mmd ファイルを画像にコンパイルする
プロジェクトビジョン
- 開発者はこれまで Mermaid を活用してアーキテクチャ図やコードベースの可視化を行ってきたが、細かな編集の限界のために Lucidchart などへ移行せざるを得なかった
- oxdraw は Mermaid のコードベース自動化と Lucidchart の視覚的自由度を組み合わせることを目指している
- これにより、コード生成型ダイアグラムの 再現性、協調性、自動化可能性を維持しつつ、視覚的完成度を高める方向を志向している
使い方
- Cargo でインストール可能:
cargo install oxdraw
- ダイアグラムのレンダリング:
oxdraw --input flow.mmd
- インタラクティブエディタ起動:
oxdraw --input flow.mmd --edit
- CLI は Mermaid ファイルを入力として受け取り、SVG または PNG 出力を生成し、
--edit オプションで ローカル Web エディタを起動する
CLI フラグ説明
-i, --input : Mermaid ソースファイル入力-o, --output : レンダリング結果の保存パス指定--png: PNG 形式で出力--scale : PNG レンダリング倍率の調整（デフォルト値 10.0）--edit: 視覚エディタを起動--serve-host / --serve-port : エディタサーバーのアドレスとポートを指定（デフォルト 127.0.0.1:5151）-b, --background-color : 背景色を指定（SVG 専用）-q, --quiet: レンダリング完了メッセージなどの出力を抑制
フロントエンド機能
- ノードおよびエッジ操作
- 選択したノードやエッジを削除（Delete/Backspace キー対応）
- ノードの色、境界線、テキスト色を個別に指定・初期化
- エッジの色、線スタイル（実線/点線）、矢印方向を設定
- エッジ経路に ドラッグ可能な制御点(control point) を追加・削除
- キャンバスとエディタのインタラクション
- ノードのドラッグ時に グリッドスナップと整列ガイドを表示
- Shift+矢印でノードを移動
- エッジハンドルをドラッグして経路を修正し、ダブルクリックでハンドルを追加/削除
- サブグラフ単位の移動をサポート — グループ内のノードとエッジをまとめて移動
- ソースパネルは Mermaid ファイルをリアルタイムで反映し、自動保存と状態表示（保存中/エラーなど）を提供
- 上部ツールバーには現在のファイルパスと保存状態を表示
技術構成とライセンス
- Rust 55.7%、TypeScript 40.0%、CSS 3.4%、その他 0.9% で構成
- MIT ライセンスで公開されており、自由に利用・修正可能
- 現在 506 Star、10 Fork を獲得しており、活発なコミュニティの関心を集めている
総合評価
- oxdraw は コードベースのダイアグラム管理の自動化と 視覚編集の直感性を組み合わせた新しいアプローチ
- Mermaid エコシステムとの 完全な互換性を維持しながら、Rust の性能と React のインタラクティブ UIを活用
- 開発者とデザイナーの双方に 協業可能なダイアグラムワークフローを提供するツールとして注目されている
1件のコメント
Hacker Newsのコメント
本当に素晴らしいプロジェクトです。Mermaid.jsをベースにした選択は、現時点で最も人気のある宣言的ダイアグラムライブラリだと思います。
より複雑なダイアグラムタイプをサポートするなら、D2 Languageも見てみる価値があります。さらに柔軟な宣言的アプローチを提供しています。
個人的にMacPorts portを作って使っています。
頻繁に使うようになれば、公式MacPortsリポジトリに貢献するつもりです。
ただ、Cargoリリースに対応したGitタグやGitHubリリースがないので、パッケージングが不便です。
今は特定のコミット(
9ccd9bf53f9a309ccda42b5c17e9c1056493fb90)を0.1.0リリースと見なして暫定的に対応しています。関連するportはこちらで見られます。
このプロジェクトはまさに私が探していたものです。宣言的ダイアグラムのソリューションでぜひ欲しい機能があります。
それは、マウスオーバー時に追加情報やネストされたダイアグラムを表示するポップアップ機能です。
たとえばリンクを共有すれば、ポップアップやネストを含んだダイアグラムをすぐ見られるようにしたいのか、
それとも
.mmdファイルだけ共有してCLIで開ければ十分なのか知りたいです。後者ならすぐに実装できますが、前者ならngrokのようなセルフホスティングやクラウドデプロイが必要になるかもしれません。
あるいは**HTMLファイルへのエクスポート(export)**機能を追加して、CLIなしでもポップアップが動作するようにすることもできそうです。
プロジェクト公開おめでとうございます。宣言的な文法で関係を定義し、既存の自動レイアウトではできない細かなカスタマイズを可能にしている点が印象的です。
ただ、
Cargo.tomlではMITライセンスと記載されていますが、リポジトリにライセンスファイルがありません。GitHub上ですぐ確認できるように追加してもらえるとよいと思います。
本当に必要なプロジェクトです。私は主にPlantUMLを使っていますが、コンポーネントが5個を超えるだけで、レイアウト調整に20〜30%の時間を使っています。
コメントを活用してレイアウトエンジンに反映するアプローチは興味深いです。特定コンポーネントの座標を固定制約として置き、残りを自動配置する方式は有用そうです。
コード変更と一緒にダイアグラムもバージョン管理に含まれれば、コードレビューとアーキテクチャ管理がずっと自然になります。
Mermaidのレイアウト品質が低く、GitHubがPlantUML対応の要望を無視しているのが残念です。
主要プラットフォームがサポートするフォーマットによって、'diagrams as code'の採用率が決まるように思います。
新しい標準を作るより、要素の重み付けに基づくレンダリングのような改善のほうが現実的だと思います。
関連する議論はGitHubコミュニティのディスカッションでも扱われています。
PlantUMLがこうした問題を解決してくれればという期待が大きいです。
これはまるでGraphvizのdot言語を強化した版のようです。
変数とよりすっきりした文法を提供していますが、基本概念は似ています。
Graphvizドキュメントを参照してください。
Mermaid.jsにはレイアウトエンジンという概念があります。
@mermaid-js/layout-elkのように。
あなたのアルゴリズムをMermaid向けの自動レイアウトエンジンとして実装する考えはありますか。
素晴らしいプロジェクトです。モバイルで見たのですが、ノード追加ボタンが見当たりません。
もう一つ欲しい機能は、**下流ノードを折りたたむ(collapse downstream nodes)**機能です。範囲外かもしれませんが、あると嬉しいです。
.mmdテキストを直接修正する必要があります。ただ、良い提案だと思います。下流ノードを折りたたむ機能は、別のユーザーが要望していたアニメーション機能とも相性がよさそうです。