lukilabs/beautiful-mermaid

これは何？

主な機能

• 01フローチャート、状態図、シーケンス図、クラス図、ER図、XYチャートをレンダリング
• 02Web UI向けのSVG、またはターミナル向けのASCII/Unicodeテキストを出力
• 03Reactのレンダー中にuseMemoと組み合わせて使える同期API
• 042色をベースにしたテーマと、15種類の組み込みテーマを提供
• 05fromShikiThemeを通じて任意のShiki/VS Codeテーマを利用可能
• 06CSSカスタムプロパティによるリアルタイムのテーマ切り替え

ユースケース

• AIチャットやエージェントのインターフェースに、生成したフローチャートや図表を表示する
• 非同期読み込みなしでReactアプリにMermaid図表を表示する
• CLIツールやターミナル出力にアーキテクチャ図や状態図を表示する
• 既存のエディターやアプリのテーマに図表の色を合わせる

クイックスタート

1. 1

   npmでパッケージをインストールする

   npm install beautiful-mermaid
2. 2

   コード内でフローチャートをSVGにレンダリングする

使う前に知っておきたいこと

• !レンダリングは同期的ですが、ELK.jsのレイアウト処理はFakeWorkerのバイパスを介して実行されるため、非常に大きな図では時間がかかる場合があります。
• !READMEに記載されている図の種類は6種類のみです。それ以外のMermaidの図の種類には対応していません。

トピック

よくある質問

beautiful-mermaid とは？

DOM依存なしでMermaid図をテーマ対応のSVGまたはASCII/Unicodeテキストに変換するTypeScriptライブラリ。 beautiful-mermaidは、Mermaidの図表ソースをSVG文字列またはプレーンテキストのASCII/Unicodeアートに変換します。フローチャート、状態図、シーケンス図、クラス図、ER図に加え、棒グラフ、折れ線グラフ、複合系列に対応したXYチャートもサポートします。

beautiful-mermaid は無料で使えますか？ライセンスは？

beautiful-mermaid は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

beautiful-mermaid は今もメンテナンスされていますか？

半年以内に更新あり。beautiful-mermaid の最終コミットは 2026年5月6日 です。

beautiful-mermaid は何に使えますか？

AIチャットやエージェントのインターフェースに、生成したフローチャートや図表を表示する 非同期読み込みなしでReactアプリにMermaid図表を表示する CLIツールやターミナル出力にアーキテクチャ図や状態図を表示する 既存のエディターやアプリのテーマに図表の色を合わせる

beautiful-mermaid のインストール方法は？

npmでパッケージをインストールする: npm install beautiful-mermaid コード内でフローチャートをSVGにレンダリングする

beautiful-mermaid はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/lukilabs/beautiful-mermaid