🎨 デザインコミュニティ

mermaid

チャットボットのフロー図やシーケンス図、状態図などを、Markdownで表示できるMermaid記法で生成し、コードの検証やローカル環境での描画も可能にするSkill。

📜 元の英語説明(参考)

Generate Mermaid diagrams for chatbot flows that render in Markdown, including choosing diagram types, producing valid Mermaid code blocks, and validating or rendering diagrams locally via the bundled scripts. Use when a user asks for chatbot flowcharts/sequence/state diagrams, wants Mermaid syntax, or needs to verify/render Mermaid without a web service.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o mermaid.zip https://jpskill.com/download/10630.zip && unzip -o mermaid.zip && rm mermaid.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/10630.zip -OutFile "$d\mermaid.zip"; Expand-Archive "$d\mermaid.zip" -DestinationPath $d -Force; ri "$d\mermaid.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して mermaid.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → mermaid フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

チャットボット用 Mermaid ダイアグラム

この Skill を使用すると、Markdown チャットインターフェースで適切にレンダリングされる Mermaid ダイアグラムを作成し、ローカルで構文を検証し、Web サービスを呼び出さずに画像をレンダリングできます。

ワークフロー

リクエストに基づいて、ダイアグラムのタイプ（flowchart、sequenceDiagram、stateDiagram-v2）を特定します。
mermaid を使用して、フェンスで囲まれた Markdown ブロックに Mermaid コードを記述します。
references/chatbot-mermaid-guidelines.md の書式設定規則に従います。
scripts/validate_mermaid.py を使用してダイアグラムを検証します。
ユーザーが画像ファイルを希望する場合は、scripts/render_mermaid.py でレンダリングします。

スクリプト

scripts/validate_mermaid.py
- ローカルの Mermaid CLI（mmdc）を呼び出して Mermaid コードを検証します。
- Mermaid がエラーなしで解析されるかどうかを確認する必要がある場合に使用します。
scripts/render_mermaid.py
- ローカルの Mermaid CLI（mmdc）を使用して、Mermaid を SVG/PNG/PDF にレンダリングします。
- 画像の埋め込みが必要な場合は、Markdown レンダラーには SVG を優先します。

注記

これらのスクリプトは、mmdc が PATH 上で利用可能であることを想定しています（Mermaid CLI）。見つからない場合は、ユーザーにローカルにインストールするように指示してください。Mermaid Web サービスは使用しないでください。
依存関係は、各 Python スクリプト内のインライン uv スクリプトメタデータによって管理されます。必要に応じて、--install-chromium を使用して pyppeteer 経由で Chromium バイナリをブートストラップします。
ダイアグラムをコンパクトにし、チャットで読みやすく保ちます。幅の広すぎるグラフを避け、短いラベルを使用し、関連する状態をグループ化します。
ユーザーが生の Markdown を要求する場合は、追加の説明を求められない限り、フェンスで囲まれた mermaid ブロックのみを返します。

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Mermaid Diagrams for Chatbots

Use this skill to create Mermaid diagrams that render well in Markdown chat interfaces, validate their syntax locally, and render images without calling a web service.

Workflow

Identify the diagram type (flowchart, sequenceDiagram, stateDiagram-v2) based on the request.
Draft Mermaid code in a fenced Markdown block using mermaid.
Follow formatting conventions in references/chatbot-mermaid-guidelines.md.
Validate the diagram using scripts/validate_mermaid.py.
If the user wants an image file, render with scripts/render_mermaid.py.

Scripts

scripts/validate_mermaid.py
- Validate Mermaid code by invoking the local Mermaid CLI (mmdc).
- Use when you need to check whether Mermaid parses without errors.
scripts/render_mermaid.py
- Render Mermaid to SVG/PNG/PDF using the local Mermaid CLI (mmdc).
- Prefer SVG for Markdown renderers when image embedding is required.

Notes

These scripts expect mmdc to be available on PATH (Mermaid CLI). If missing, instruct the user to install it locally; do not use the Mermaid web service.
Dependencies are managed via inline uv script metadata in each Python script. Use --install-chromium to bootstrap the Chromium binary via pyppeteer when needed.
Keep diagrams compact and readable in chat: avoid overly wide graphs, use short labels, and group related states.
If the user asks for raw Markdown, return only the fenced mermaid block unless they ask for extra explanation.