Mermaid ASCII: ターミナルでMermaidダイアグラムをレンダリング

 (github.com/lukilabs)
16 ポイント 投稿者 GN⁺ 2026-01-30 | 1件のコメント | WhatsAppで共有
  • beautiful-mermaidは、MermaidダイアグラムをSVGまたはASCIIアートとしてレンダリングする超高速なTypeScriptベースのツール
  • 5種類のダイアグラム（Flowchart、State、Sequence、Class、ER）をサポートし、ターミナルとブラウザの両方で動作
  • 15種類の組み込みテーマとShiki互換性により、VS Codeテーマをそのまま適用可能
  • Monoモードでは2色だけで一貫した視覚表現を提供し、CSSカスタムプロパティでリアルタイムなテーマ切り替えをサポート
  • AI支援プログラミング環境でデータフローとシステム構造を可視化できる軽量・依存関係なしのツールとして注目

概要

  • beautiful-mermaidは、MermaidダイアグラムをSVGまたはASCII/Unicodeテキストとしてレンダリングするツール
    • DOM依存なしで動作し、**超高速レンダリング（500ms以内に100件以上のダイアグラム）**をサポート
    • CraftチームがCraft Agents向けに開発
  • Mermaid-ascii（Goベースのプロジェクト）をTypeScriptに移植し、機能を拡張
    • Sequence、Class、ERダイアグラムのサポートを追加
    • Unicodeのボックス文字、間隔、パディング設定機能を含む

主な機能

  • 対応ダイアグラム種類: Flowchart、State、Sequence、Class、ER
  • 出力形式: SVG（リッチUI向け）、ASCII/Unicode（ターミナル向け）
  • テーマシステム
    • 15種類の組み込みテーマを提供（tokyo-night、dracula、nord、github-dark など）
    • Monoモード: 背景（bg）と前景（fg）の2色だけから全体の色を自動派生
    • Enrichedモード: accent、muted、surface、border などの任意の色を指定可能
    • CSSカスタムプロパティベースのリアルタイム切り替えをサポート
  • Shiki統合
    • VS Codeテーマの色をダイアグラムの色に自動マッピング
    • fromShikiTheme()関数でbg、fg、accentなどを抽出可能

インストールと使用方法

  • インストールコマンド
    • npm install beautiful-mermaid または bun add beautiful-mermaid、pnpm add beautiful-mermaid
  • SVGレンダリング例 
    import { renderMermaid } from 'beautiful-mermaid'
const svg = await renderMermaid(`graph TD; A-->B;`)
  • ASCIIレンダリング例 
    import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(`graph LR; A --> B --> C`)
  • ブラウザでの利用
    • CDN（unpkg、jsDelivr）経由で<script>タグから直接読み込み可能
    • グローバルオブジェクトbeautifulMermaidからrenderMermaid、renderMermaidAscii、THEMESなどにアクセス可能

ASCII出力とオプション

  • Unicodeモード（デフォルト）と純粋なASCIIモードをサポート
  • オプション項目
    • useAscii: ASCIIを使うかどうか
    • paddingX、paddingY: ノード間の間隔
    • boxBorderPadding: ノード内部の余白
  • 出力例 
    ┌───┐     ┌───┐
│ A │────►│ B │
└───┘     └───┘

API概要

  • renderMermaid(text, options?): MermaidダイアグラムをSVGとしてレンダリング
    • オプション: bg、fg、accent、muted、surface、border、font、transparent
  • renderMermaidAscii(text, options?): ASCII/Unicodeテキストとしてレンダリング
  • fromShikiTheme(theme): Shikiテーマから色を抽出
  • THEMES: 15種類の組み込みテーマオブジェクト
  • DEFAULTS: デフォルト色（#FFFFFF、#27272A）

ライセンスと制作

  • MITライセンス
  • Craftチーム制作
  • ASCIIエンジンのベース: Alexander Grooffのmermaid-ascii

技術的意義

  • AIコーディングアシスタント環境で、ダイアグラムをターミナルやチャットインターフェース内で即座に可視化できる
  • 軽量・高速・依存関係なしの構造により、CLIツールやサーバー環境でも活用しやすい
  • テーマの拡張性と互換性によって開発者体験を向上

関連記事

1件のコメント

 
GN⁺ 2026-01-30
Hacker Newsのコメント

  • Alexander Grooffが作ったGoライブラリmermaid-asciiをベースにしたプロジェクトが本当にすばらしい
    ただし、"start"エッジがレンダリングされないバグを見つけた
    テストはagents.craft.do/mermaidで行った

  • なぜ最近ASCIIダイアグラムが再び注目されているのか、よく分からない
    MermaidやPlantUMLもすでにテキストベースであり、たいていのユーザーは機械よりも人が見やすい標準的なダイアグラムを求めている
    ASCIIは印字可能文字に制限されるため表現力が低く、標準化も難しい

    • 文脈による。たとえばREADMEやCLI出力のようにMermaidをレンダリングできない環境では、ASCIIは可読性の面で最善の選択だ
    • コードコメントの中にASCIIダイアグラムを入れられる。Claude Codeのようなターミナルベースのツールでも見やすい
    • 「ASCIIは役に立たない」というより、テキスト中心のワークフロー（例: Org Mode、Gitリポジトリ管理）ではむしろ有用だ
      画像ファイル管理やGit LFSのような複雑な設定が不要だからだ
    • レンダラーが不要なのも利点だ。Markdown文書やソースコードの中でもそのまま「レンダリング済み」の形で読める
    • 多くの開発者やコーディングエージェントがMarkdownとCLI環境を主に使っているため、このようなASCIIアプローチは自然だ

  • 私はASCIIダイアグラムが本当に好きだ
    ターミナルでcatして見ても、ウェブサイトでレンダリングして見ても同じように美しく見えるのが魅力だ
    良いmonospacedフォントさえあれば、見た目もすっきりする
    ASCIIダイアグラム作成アプリのMonodrawもおすすめだ

    • ^Unicode
    • ソースコードの先頭にダイアグラムを入れられる点が特に良い

  • 実際のMermaid ASCIIレンダラーはAlexanderGrooff/mermaid-asciiプロジェクトから移植したものだ
    このプロジェクトではそれをTypeScriptに変換し、独自テーマを追加した

    • 実際には単にmermaid-asciiをWASMにバンドルしてもよかった気がする
      主要アルゴリズムはほぼ1:1の変換なので、ClaudeならTSへの移植に1時間もかからなかっただろう
      GoコードとTSコードを比較できる
    • クレジットに感謝する
    • Goベースなのでパッケージ管理のジョークも不要だ。自分のデバッガに統合する予定だ
    • 誰かが、AIがプロジェクト全体をコピーして名前だけ変えたのではないかと指摘した
    • 元リンクを修正した。投稿者は善意で投稿したようだ

  • Mermaidが注目されているが、Kroki(kroki.io)ははるかに多くのダイアグラム形式をサポートしている
    BlockDiag、BPMN、C4、D2、DBML、Excalidraw、GraphVizなど、ほぼあらゆるテキストベースのダイアグラムを含む
    私のMarkdownエディタKeenWrite(keenwrite.com)はKrokiをサービスとして統合しており、新しい形式が追加されると自動で使える
    Mermaidは<foreignObject>を使うため、ほとんどのライブラリでレンダリングが難しい

    • MermaidJSとKrokiを比べるのは、PDF.jsとAdobe Acrobatを比べるようなものだ
      MermaidJSはウェブページ内で高速かつローカルに動作するが、Krokiは外部サービスへの依存がある
      複雑なダイアグラムが不要なら、Mermaidのほうがより簡単な選択だ
    • 以前、NetworkX DAGをASCIIでレンダリングするためにphartというツールを作った
      READMEの例にはチェスグラフなど多様な出力例がある
    • 最初はKrokiのデザインがあまりに影とフォントの歪みが強くていまひとつだと思っていたが、後で誤解だったと分かった
      それでもMermaidのデフォルトスタイルのほうがよりすっきりしていると感じる
      ちなみにKeenWriteはかなり良さそうだ

  • テキストをASCIIダイアグラムに変換するツールDiagonもある
    私がまとめたテキスト→ダイアグラムツール一覧もあるが、テキスト→ASCII変換ツールは多くない

    • 良いリストだとして感謝された

  • ライブデモを実行するにはAIエージェントプラットフォームのダウンロードが必要なようだ
    インストールなしですぐ試したいのに、それができないのは残念だ

    • 開発者たちがGitHub Pagesベースのクライアント専用デモを作ってくれるとよい
      プロジェクト構成上、十分可能に見える

  • 「Subgraph Direction Override」機能があり、サブグラフの方向を別に設定できる
    これによってMermaidがサポートしていなかったスイムレーンダイアグラムを真似できる

  • 私が作ったSelkieは、MermaidパーサーとレンダラーをRustで完全実装した実験的プロジェクトだ
    Claude Codeでどこまで可能か試す目的だったが、結果は驚くべきものだった
    Playgroundですぐ実行できる
    Kittyターミナルをサポートすれば、ダイアグラムを直接ターミナルに出力することもできる
    近いうちに全過程をブログにまとめる予定だ

  • このプロジェクトは本当にすばらしく、Claude Codeとの相乗効果も印象的だ
    私は似たようなプロジェクトをやったが、ASCIIではなくインタラクティブなコード探索に焦点を当てた
    人間の理解を助ける方向で設計し、D2を使っており、Mermaid対応も準備中だ
    人のためのインタラクティブ性のほうが価値があるのか、それともエージェントコンテキストが重要なのかについて意見を聞きたい
    プロジェクトリンク