mermaid-render

Mermaid レンダリング

Mermaid 図を SVG／PNG／PDF にレンダリングします。標準の Mermaid 出力に加え、svg2roughjs を使用した手描き風（スケッチ）スタイルにも対応しています。Mermaid Live Editor の手描きモードと同じ出力です。

デフォルトでは、手描き風スタイルが有効です。標準の Mermaid 出力にするには、--no-handdrawn を使用します。

このスキルを使用する場面

1. ユーザーが Mermaid 図の「レンダリング」「可視化」「生成」を依頼した場合
2. ユーザーが .mmd ファイルまたは Mermaid のコードブロックを提供し、画像の出力を必要としている場合
3. ユーザーが「フローチャート／シーケンス図／ステート図／クラス図／ER 図を作成」したい場合
4. Markdown ドキュメントから図を抽出してレンダリングする必要がある場合
5. ユーザーが .mmd ファイルのディレクトリを「一括処理」したい場合
6. ユーザーが「手描き風」「スケッチ」「ラフ」スタイルについて言及した場合 — デフォルトのままにするか、--pencil-filter を追加します
7. ユーザーがすっきりした標準の Mermaid 出力（手描き風ではないもの）を希望する場合 — --no-handdrawn を使用します

⚠️ パスの解決（重要）

すべてのスクリプトは、この SKILL.md と同じディレクトリにあります。スクリプトを実行する前に、このファイルの実際のパスを特定し、そこからスクリプトのディレクトリを導き出す必要があります。

ルール： このドキュメント内の $SKILL_DIR プレースホルダーをすべて、SKILL.md ファイルがあるディレクトリの絶対パスに置き換えます。

例：このファイルが /path/to/mermaid-render/SKILL.md にある場合、$SKILL_DIR = /path/to/mermaid-render です。

SKILL_DIR="<absolute path to the directory containing this SKILL.md>"

---

クイックスタート

標準の Mermaid 出力（手描き風なし）

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --no-handdrawn

手描き風スタイル（デフォルト）

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg

PNG として出力（高解像度）

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.png \
  --scale 2

PDF として出力

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.pdf \
  --pdf-fit

Markdown から抽出してレンダリング

node "$SKILL_DIR/scripts/render.mjs" \
  --input document.md \
  --output ./output-dir

一括レンダリング

node "$SKILL_DIR/scripts/batch.mjs" \
  --input-dir ./diagrams \
  --output-dir ./output

---

ワークフロー

ステップ 1：ユーザーの希望を確認する

• 既存の Mermaid コードをレンダリングする → .mmd ファイルとして保存し、render.mjs を使用します
• Markdown から図を抽出する → .md ファイルを直接渡します
• 新しい図を作成する → $SKILL_DIR/assets/example_diagrams/ のテンプレートを参照します
• 一括処理する → batch.mjs を使用します

ステップ 2：出力スタイルを選ぶ

• デフォルト（手描き風） — svg2roughjs によるスケッチ／ラフスタイル。Mermaid Live Editor と同じです
• --no-handdrawn — スケッチ効果のない、すっきりした標準の Mermaid 出力

ステップ 3：出力形式を選ぶ

• svg — ベクター形式。ウェブやドキュメントに最適（デフォルト）
• png — ビットマップ形式。埋め込みや共有に最適（解像度には --scale を使用）
• pdf — 印刷に最適（自動サイズ調整には --pdf-fit を使用）

ステップ 4：テーマを選ぶ

• default — Mermaid のデフォルトテーマ
• neutral — ドキュメントに適したニュートラルな色調
• dark — ダークテーマ
• forest — グリーンテーマ

ステップ 5：レンダリングする

node "$SKILL_DIR/scripts/render.mjs" -i input.mmd -o output.svg --theme neutral

---

オプション

render.mjs

オプション	説明	デフォルト
-i, --input	入力ファイル（.mmd または .md）	必須
-o, --output	出力ファイル（.svg／.png／.pdf）	必須
-e, --format	出力形式：svg、png、pdf	拡張子から推定
-t, --theme	Mermaid のテーマ	default
--bg	背景色	transparent
-w, --width	ページ幅	800
-H, --height	ページの高さ	600
-s, --scale	拡大率（PNG の解像度に影響します）	1
-c, --config	Mermaid の JSON 設定ファイル	なし
-C, --css	カスタム CSS ファイル	なし
--pdf-fit	PDF を図のサイズに合わせる	無効
--icon-packs	アイコンパック（コンマ区切り）	なし
--font	手描き風モードのフォントファミリー	Excalifont, Xiaolai, cursive
--pencil-filter	鉛筆フィルター効果を有効にする（手描き風のみ）	無効
--randomize	要素ごとのランダム化を有効にする（ハッチング密度が変化します）	無効
--seed	ランダムシード	なし
--roughness	ラフさのレベル（手描き風のみ）	rough.js のデフォルト
--bowing	たわみのレベル（手描き風のみ）	rough.js のデフォルト
--hachure-gap	ハッチング線の間隔（px、小さいほど密になります）	2
--fill-weight	ハッチング線の幅（px）	1.5
--no-handdrawn	手描き風への変換をスキップし、Mermaid の SVG をそのまま出力する	無効

batch.mjs

オプション	説明	デフォルト
-i, --input-dir	入力ディレクトリ	必須
-o, --output-dir	出力ディレクトリ	必須
-e, --format	出力形式：svg、png、pdf	svg
-t, --theme	Mermaid テーマ	default
--bg	背景色	transparent
-s, --scale	拡大率（PNG の解像度に影響します）	1
--font	フォントファミリー（手描きモード）	Excalifont, Xiaolai, cursive
--pencil-filter	鉛筆フィルター効果を有効にする	オフ
--randomize	要素ごとのランダム化を有効にする	オフ
--seed	ランダムシード	なし
--roughness	粗さのレベル	rough.js のデフォルト
--bowing	たわみのレベル	rough.js のデフォルト
--hachure-gap	ハッチング線の間隔（px）	2
--fill-weight	ハッチング線の幅（px）	1.5
--no-handdrawn	手描き変換をスキップする	オフ
--concurrency	最大並列レンダリング数	3

---

例

フローチャート — 標準スタイル

node "$SKILL_DIR/scripts/render.mjs" \
  --input "$SKILL_DIR/assets/example_diagrams/flowchart.mmd" \
  --output flowchart.svg \
  --no-handdrawn

フローチャート — 手描きスタイル

node "$SKILL_DIR/scripts/render.mjs" \
  --input "$SKILL_DIR/assets/example_diagrams/flowchart.mmd" \
  --output flowchart.svg

シーケンス図（高解像度 PNG、ニュートラルテーマ）

node "$SKILL_DIR/scripts/render.mjs" \
  --input "$SKILL_DIR/assets/example_diagrams/sequence.mmd" \
  --output sequence.png \
  --scale 2 --theme neutral

状態図（自動フィット PDF）

node "$SKILL_DIR/scripts/render.mjs" \
  --input "$SKILL_DIR/assets/example_diagrams/state.mmd" \
  --output state.pdf \
  --pdf-fit --theme dark

Markdown からすべての図を抽出する

# Single code block → single output file
node "$SKILL_DIR/scripts/render.mjs" -i doc.md -o diagram.svg

# Multiple code blocks → output to directory (auto-named doc-1.svg, doc-2.svg, ...)
node "$SKILL_DIR/scripts/render.mjs" -i doc.md -o ./output-dir

カスタム Mermaid 設定

# config.json: { "theme": "neutral", "flowchart": { "curve": "basis" } }
node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --config config.json

カスタム CSS

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --css custom.css

アイコンパック

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --icon-packs @iconify-json/logos

再現可能な手描き出力（固定シード）

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --seed 42 --no-randomize

鉛筆フィルター効果

node "$SKILL_DIR/scripts/render.mjs" \
  --input diagram.mmd \
  --output diagram.svg \
  --pencil-filter

---

ユーザー要件から図を作成する

ステップ 1：図の種類を特定する

• プロセス／ワークフロー → graph TD または flowchart LR
• API／インタラクション → sequenceDiagram
• 状態／ライフサイクル → stateDiagram-v2
• オブジェクトモデル → classDiagram
• データベース → erDiagram
• タイムライン → timeline
• ガント／プロジェクト → gantt
• マインドマップ → mindmap

ステップ 2：.mmd ファイルを作成する $SKILL_DIR/assets/example_diagrams/ のテンプレートを参照してください。

ステップ 3：レンダリングして反復する

node "$SKILL_DIR/scripts/render.mjs" -i diagram.mmd -o preview.svg
# Edit diagram.mmd based on feedback, re-render

---

機能

Mermaid レンダリング

• すべての Mermaid 図の種類に対応（フローチャート、シーケンス図、状態図、クラス図、ER 図、タイムライン、ガント、マインドマップなど）
• SVG／PNG／PDF に出力
• Markdown 入力に対応（Mermaid コードブロックを自動抽出）
• CJK（中国語／日本語／韓国語）のテキストを自動最適化
• Mermaid のカスタム設定と CSS
• アイコンパックに対応（Iconify）
• カスタムテーマ：default、neutral、dark、forest

手描きスタイル（デフォルト。--no-handdrawn で無効化）

• Mermaid Live Editor の手描きモードと同一（svg2roughjs を使用）
• カスタムノードの色（style ディレクティブ）を保持
• 鉛筆フィルター効果
• 粗さとたわみの調整
• シードパラメーターによる再現可能な出力

依存関係

• Node.js 18+
• puppeteer、svg2roughjs、@mermaid-js/mermaid-cli（すべて npm install でインストール）

トラブルシューティング

mmdc が見つからない

❌ @mermaid-js/mermaid-cli not found

解決方法： npm install

puppeteer のインストールに失敗する

Puppeteer は Chromium をダウンロードする必要があります。ネットワークに接続できることを確認してください。手動でインストールするには：

cd "$SKILL_DIR" && npm install

Mermaid の構文エラー

レンダリングの前に https://mermaid.live/ で構文を検証してください。

---

ファイル構成

scripts/

• render.mjs — 単一ファイルのレンダラー（SVG／PNG／PDF、Markdown 入力）
• batch.mjs — バッチレンダラー

assets/

• example_diagrams/flowchart.mmd — フローチャートのテンプレート
• example_diagrams/sequence.mmd — シーケンス図のテンプレート
• example_diagrams/state.mmd — 状態図のテンプレート