From yunosuke-skills
Mermaid記法でSVGダイアグラムを生成し、READMEやMarkdownに埋め込む。3モード: `render`(既存Mermaidコード→テーマ付きSVG)、`generate`(コードベース分析→自動生成)、`create`(自然言語→ダイアグラム)。トリガー: 「Mermaid」「マーメイド」「Mermaidで図を作って」「フローチャート」「可視化」「アーキテクチャ図」「シーケンス図」「ER図」「クラス図」「状態遷移図」。draw.io形式が指定された場合はdrawio-diagram-forgeスキルを使用すること(このスキルはMermaid記法専用)。 or architecture that would benefit from visual representation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/yunosuke-skills:beautiful-mermaidThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Render Mermaid diagrams as beautifully themed SVG files using the `beautiful-mermaid` library.
Render Mermaid diagrams as beautifully themed SVG files using the beautiful-mermaid library.
Output is optimized for embedding in README.md and other Markdown documents.
Mermaid diagram内のノードラベル、エッジラベル、サブグラフタイトルは全て日本語で記述する。 ユーザーへの説明やMarkdown埋め込みスニペットのalt textも日本語で書く。
例:
A[ユーザー入力] (not A[User Input])A -->|認証成功| B (not A -->|Auth Success| B)subgraph auth["認証フロー"] (ASCII ID + Japanese label)技術用語(API, DB, HTTP, gRPC等)はそのまま使って良い。
The project must have beautiful-mermaid installed:
npm install beautiful-mermaid
# or
bun add beautiful-mermaid
If not installed, install it before proceeding.
This skill operates in three modes, selected by argument:
| Mode | Argument | Description |
|---|---|---|
| Render | render | Take existing Mermaid code and render it as a themed SVG |
| Generate | generate | Analyze codebase and auto-generate architecture diagrams |
| Create | create | Convert natural language description into a Mermaid diagram |
If no argument is given, ask the user which mode they want, or infer from context.
Take existing Mermaid source code and produce a themed SVG file.
github-light). Read references/theme-reference.md for available themes and selection logic.references/render-options-and-troubleshooting.md for render option details if non-default settings are needed.Create a temporary script at the project root and run it with bun:
import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'
import { writeFileSync } from 'fs'
const source = `
<MERMAID_SOURCE_HERE>
`
const theme = THEMES['<THEME_NAME>'] // or custom { bg, fg } object
const svg = renderMermaidSVG(source.trim(), {
...theme,
padding: 40,
font: 'Noto Sans JP',
})
writeFileSync('<OUTPUT_PATH>', svg)
console.log('SVG saved to <OUTPUT_PATH>')
Run with bun (required -- the package exports raw .ts files):
bun run render-mermaid.tmp.ts && rm render-mermaid.tmp.ts
docs/diagrams/<name>.svg (create directory if needed)
Analyze the codebase and automatically generate architecture or flow diagrams.
Identify what to visualize. Ask if unclear. Common targets:
Read relevant source files to understand the structure
Compose Mermaid source code that accurately represents the codebase:
graph TD/LR for architecture and flow diagramserDiagram for data modelsclassDiagram for class hierarchiessequenceDiagram for request/response flowsstateDiagram-v2 for state machinesreferences/mermaid-syntax-reference.md for supported shapes, edge types, and directions.references/layout-and-design-guide.md for ELK layout constraints and design principles. This is critical for clean rendering.Read references/theme-reference.md for theme selection. Render using the same approach as Render mode.
Save and provide the embed snippet
Convert a natural language description into a Mermaid diagram.
references/mermaid-syntax-reference.md for supported shapes, edge types, and directions.references/layout-and-design-guide.md for ELK layout constraints and design principles. This is critical for clean rendering.references/theme-reference.md for theme selection. Render and save using the same approach as Render mode.| File | Content | When to Read |
|---|---|---|
references/mermaid-syntax-reference.md | Mermaid構文リファレンス(形状、エッジ、方向) | generate/createモードでMermaidコードを生成する際 |
references/layout-and-design-guide.md | ELKレイアウト制約とデザイン原則 | generate/createモードでMermaidコードを生成する際(必須) |
references/theme-reference.md | テーマ一覧、カスタムテーマ、選択ロジック | 全モードでテーマを選択する際 |
references/render-options-and-troubleshooting.md | レンダリングオプションとトラブルシューティング | レンダリング設定の調整時またはエラー発生時 |
docs/diagrams/ (relative to project root)<descriptive-name>.svg (kebab-case)GitHub renders SVG files referenced in Markdown. The generated SVGs are self-contained (fonts imported via Google Fonts URL in the SVG style block) and render correctly on GitHub.
If the user needs the diagram inline in a README that's already being edited, insert the image reference at the appropriate location.
Render existing code:
/beautiful-mermaid render
graph TD
A[User Request] --> B[API Gateway]
B --> C{Auth?}
C -->|Yes| D[Service]
C -->|No| E[401 Error]
Generate from codebase:
/beautiful-mermaid generate
src/ディレクトリのモジュール依存関係を可視化して
Create from description:
/beautiful-mermaid create
ユーザーがログインしてからダッシュボードを表示するまでのフローを作って
npx claudepluginhub yunosukeyoshino/skillsCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.