Beautiful‑Mermaid：超高速でテーマ設定可能な Mermaid 図表レンダラー

February 20, 2026

タグ:

Open Source SVG TypeScript mermaid diagram-rendering

Beautiful‑Mermaid：超高速でテーマ設定可能な Mermaid 図表レンダラー

Beautiful‑Mermaid は、Mermaid‑DSL を美しい SVG またはターミナルに適した ASCII アートに変換する極小で純粋な TypeScript ライブラリです。Craft Agents の図表サポートを駆動し、DOM 依存をゼロにし、500 ms 未満で 100 + の図表、15 のテーマ、シームレスな CSS ベースのライブテーマ切替を実現します。

主な特徴

DOM 依存なし – 純 TS、Node、ブラウザ、CLI で動作。
高速描画 – 超軽量バンドルで 100 + の図表を 0.5 秒未満で描画。
二重出力 – SVG はリッチ UI 用、ASCII/Unicode はターミナル用。
豊富なテーマ – 並行表示モード、拡張モード、15 個の組み込みテーマ、Shiki 統合。
ライブテーマ切替 – CSS カスタムプロパティでレンダリング再実行なしに切替可能。
マルチドイグラムサポート – フローチャート、状態図、シーケンス図、クラス図、ER 図。

はじめに

# お好きなパッケージマネージャーでインストール
npm i beautiful-mermaid
# あるいは
bun add beautiful-mermaid
# あるいは
pnpm add beautiful-mermaid

SVG の描画

import { renderMermaid } from 'beautiful-mermaid';

const diagram = `
sequenceDiagram
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hi Alice!
`;

const svg = await renderMermaid(diagram, {
  // 既存のテーマを選択できます
  ...THEMES['tokyo-night'],
  // それともカスタムカラーを設定
  bg: '#1a1b26',
  fg: '#a9b1d6',
});

document.body.innerHTML = svg;

CLI 用 ASCII の描画

import { renderMermaidAscii } from 'beautiful-mermaid';

const ascii = renderMermaidAscii(`graph LR; A --> B --> C`);
console.log(ascii);

┌───┐ ┌───┐ ┌───┐
│ A │────►│ B │────►│ C │
└───┘ └───┘ └───┘

CSS 変数でのカスタムテーマ

全てのテーマカラーは <svg> 要素の CSS カスタムプロパティとして設定でき、即座にライブ切替が可能です。

svg.style.setProperty('--bg', '#282a36');
svg.style.setProperty('--fg', '#f8f8f2');

SVG は再描画なしに即時更新されます。

Shiki テーマの統合

VS Code スタイルのテーマを使いたい場合は、Shiki テーマをインポートして変換します。

import { getSingletonHighlighter } from 'shiki';
import { renderMermaid, fromShikiTheme } from 'beautiful-mermaid';

const highlighter = await getSingletonHighlighter({
  themes: ['dracula', 'catppuccin-mocha'],
});

const colors = fromShikiTheme(highlighter.getTheme('dracula'));
const svg = await renderMermaid(diagram, colors);

例：フローチャートの描画

const flow = `
flowchart TD
  Start --> Decide{Decision}
  Decide -->|Yes| Process
  Decide -->|No| End
`;

const svg = await renderMermaid(flow, THEMES['one-dark']);

Beautiful‑Mermaid のメリット

シンプルさ – 重い依存はなく、純 TS で完結。
パフォーマンス – ベンチマークで 100+ 図表を 500 ms 未満に描画。
汎用性 – Web、Node、任意の環境で動作。
拡張性 – 独自テーマの追加、Shiki との連携、ライブカラー切替。
オープンソース – MIT ライセンスでコミュニティに優しい。

利用シナリオ

開発ツール – VS Code 拡張機能でインタラクティブフローチャートを埋め込む。
ドキュメント – MkDocs や Docsify で SVG 図表を生成。
CLI ユーティリティ – ターミナルログで人間が読める図表を出力。
チャットボット – ユーザーのリクエストに応じてチャット UI 内にロジックを可視化。

コミュニティと貢献

Beautiful‑Mermaid は GitHub 上で活発に開発されています。イシューやプルリクエストで貢献できます。オープンタスクは issues 、貢献ガイドは CONTRIBUTING.md を参照してください。

TL;DR

beautiful-mermaid をインストール。
renderMermaid() で SVG、renderMermaidAscii() でテキストを描画。
ビルトインテーマまたはカスタムカラーを使用。
CSS 変数でランタイム時にテーマを切替可能。
Shiki で VS Code テーマカラーを利用。

Beautiful‑Mermaid を使えば、ブラウザ、ターミナル、またはどこでも、プレーンな Mermaid テキストを美しいビジュアルに変換できます。

元の記事: オリジナルを見る

この記事を共有