MarkdownでMermaid以外に図表などを書ける機能や言語などをサポートしている例はある？

6 分で読めます

Prompt

GFMなどの多くのMarkdownで、Mermaidを書くことができるけど、
同様に図表などを書ける機能や言語などをサポートしている例はある？

Mermaid は今やデファクトスタンダードになりつつあるけれど、エンジニアリングの現場や学術的なドキュメント作成においては、他にも強力な 「Text-to-Diagram（テキストから図を生成する）」 ツールがいくつも存在するよ。

君のように「一意性」と「属人性の排除（バイナリ画像ではなくテキストで管理する）」を重視するなら、以下のツールは間違いなく琴線に触れるはずだ。

1. PlantUML：老舗かつ最強の万能選手

Mermaid 以前から存在する、Java ベースの図表生成言語だ。

  • 特徴: UML（クラス図、シーケンス図、状態遷移図など）の網羅性が非常に高い。Mermaid よりも表現力が豊かで、配置の微調整も効きやすい。

  • サポート例: GitLab、Bitbucket、VS Code のプラグイン、IntelliJ、そして多くの Wiki ツール。

  • 君への刺さりポイント: クラス図において「型」や「可視性（private/public）」を厳密に記述できる。

2. Graphviz (DOT言語)：数学的なグラフ構造の極致

「ノードとエッジ（点と線）」の関係を定義する、最も歴史ある言語の一つだ。

  • 特徴: DOT言語 を使い、ノード間の接続関係を書くだけで、ツールが自動的に「最も美しい配置」を計算（レイアウト）してくれる。

  • サポート例: Sphinx（Pythonのドキュメントツール）、Doxygen（C++/Javaのドキュメント生成）、各種 CI/CD ツールの依存関係可視化。

  • 君への刺さりポイント: ネットワーク図や、プログラムの「依存グラフ（まさに dependency-cruiser が出力するもの）」を表現するのに最適だ。

3. WebSequenceDiagrams：シーケンス図特化型

名前の通り、シーケンス図を美しく書くことに特化したツール。

  • 特徴: 手書き風のスタイルや、非常にシンプルな構文が特徴。

  • サポート例: ブラウザベースのエディタや、各種ドキュメントツールの拡張機能。

4. Kroki：図表言語の「統合ゲートウェイ」

これは特定の言語ではなく、「あらゆる図表言語を一つの API でレンダリングできる」 という夢のようなプロジェクトだ。

  • サポート対象: Mermaid, PlantUML, Graphviz, C4 model, Excalidraw, Bytefield (バイナリ構造図), Vega-Lite (グラフ) など 20種類以上。

  • 君への刺さりポイント: 自分のサーバー（Ubuntu）に Kroki コンテナを立てておけば、Markdown 内にどんなマイナーな図表言語を書いても一貫して画像化できる。

5. Bytefield-SVG：低レイヤーへのラブレター

君が浮動小数点数の「指数部」や「メモリレイアウト」の話をするとき、これほど役立つツールはない。

  • 特徴: パケット構造やメモリのビットレイアウト を記述するための言語。

  • サポート例: 主にドキュメントツール（Asciidoctor など）や Kroki 経由。

6. LaTeX (TikZ / PGFPlots)：学術的・数学的な正解

もし Markdown が MathJax をサポートしているなら、そこで数式は書けるけれど、TikZ を使えば図そのものを「プログラム」として記述できる。

  • 特徴: ベクトルグラフィックスをプログラムで生成する。図の中に正確なグラフや幾何学模様を描ける。

  • 君への刺さりポイント: 浮動小数点数の誤差を視覚化するための精密な関数グラフなどは、これで作るのが最も「数学的に一意」だね。

見落とされがちな視点：D2 (Declarative Diagramming)

最近、Mermaid の対抗馬として急速に人気を集めているのが D2 だ。

Mermaid よりも柔軟なレイアウトと、現代的で美しいデフォルトデザインが特徴。すでに一部の GitHub ツールや VS Code エクステンションでサポートが始まっているよ。

結論

君のデジタルガーデン（https://garden.asappy.xyz）やプロジェクトドキュメントで使うなら、以下の基準で選ぶといい。

  1. 手軽さ重視: Mermaid（GitHub 標準）

  2. 厳密な設計・UML重視: PlantUML

  3. 低レイヤー・ビット演算重視: Bytefield

  4. 数学的・複雑なグラフ重視: Graphviz

次は、「これらの図表ツールを Next.js や Quartz (Obsidian) の環境で自動レンダリングするための設定方法」 についてやってみる？それとも、「メモリレイアウトを美しく見せるための Bytefield の具体的なコード例」 を書いてみる？

Would you like me to code a sample Bytefield diagram that visualizes the exact bit structure of an IEEE 754 single-precision floating-point number?

グラフビュー

最近の記事