ガイド
CLI で Mermaid 図をレンダリングする
npx コマンド 1 つでターミナルに直接 Mermaid 図をレンダリング。ヘッドレスブラウザ不要、Chromium のダウンロード不要、依存ゼロ。
npx @crafter/mermaid-cli diagram.mmdこのコマンドは、ANSI カラーと Unicode 罫線を使ってターミナルに図をレンダリングします。ヘッドレスブラウザも Chromium のダウンロードも不要で、エンジン全体はわずか 30.5KB です。
stdin から
echo "graph TD; A-->B-->C" | npx @crafter/mermaid-cliテーマを選ぶ
npx @crafter/mermaid-cli --theme tokyo-night diagram.mmd
npx @crafter/mermaid-cli --list-themes # 30 availableオプション
| フラグ | 説明 |
|---|---|
--theme <name> | テーマ名（デフォルト：one-hunter） |
--width <n> | ターミナル幅（デフォルト：自動検出） |
--compact | コンパクトな間隔 |
--list-themes | 全 30 テーマを一覧表示 |
恒久的にインストールする
npm install -g @crafter/mermaid-cli
crafter-mermaid diagram.mmd@mermaid-js/mermaid-cli と何が違うのか？
公式の @mermaid-js/mermaid-cli は、Puppeteer 経由でヘッドレス Chromium を起動してレンダリングします。これは重量級のインストールで、多くの CI やサンドボックス環境では動作しません。@crafter/mermaid-cli は、依存ゼロ・同期 API でフルスクラッチ実装されたレンダリングエンジン @crafter/mermaid を使うため、Node が動く環境ならどこでも即座に動作します。
ターミナルレンダリングではなく SVG 出力が必要な場合は、ライブラリを直接使ってください：
import { render } from "@crafter/mermaid"
const svg = render("graph TD; A-->B")