メニュー
Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Design and specify banners for CKM projects across all platforms and formats. Activate when the user asks to create, design, or plan banners, social media covers, display ads, web heroes, or print materials. References references/banner-sizes-and-styles.md for the full size catalog and 22 art direction styles.
Identify, map, and optimize all conflicts within a Visual Story Planner StoryGraph. Always activate this skill when the user mentions: "conflict", "tension", "escalation", "antagonist dynamics", "analyze conflicts", "my story lacks tension", "how do conflicts connect", "conflict optimization", "subplot conflicts", or "is my conflict believable". Also use when the user asks why the story feels flat or stakes feel low — conflict analysis is almost always the answer. Produces a conflict map with type classification, escalation health score, interconnection diagram (as text), and specific improvement suggestions ranked by impact.
Expert story structure analysis using bl1nk-visual-mcp. Analyze story text, extract 3-act structure, characters, conflicts, relationships, and validate narrative structure. Activates for analyze story, story structure, story graph, validate story, character extraction, conflict analysis, narrative structure, story validation, three act structure.
Expert story visualization and export using bl1nk-visual-mcp. Export StoryGraph to Mermaid diagrams, Canvas JSON, Markdown, HTML dashboards, and MCP UI dashboards. Activates for export story, export mermaid, export canvas, story dashboard, story visualization, convert to mermaid, story markdown, story html.
Deep structural analysis of story graphs for Visual Story Planner projects. Use this skill whenever the user says "audit", "check structure", "analyze story structure", "is my story balanced", "review my plot", "structural report", or asks for feedback on three-act balance, pacing health, character arc completeness, or conflict escalation. Also activate when the user runs `validate_story_structure` and wants an explanation of results, or when story export output is present and they want a critique. IMPORTANT: Any export action (export_mermaid, export_canvas, export_dashboard, etc.) must be preceded by `validate_story_structure`. If validation reports any issues, surface them with severity levels (error / warning) and require explicit user acknowledgment before continuing to export. Block exports when blocking (error-level) issues exist unless the user explicitly confirms they accept the risk. This skill provides a four-phase audit (Structure → Characters → Conflicts → Pacing) with a scored health report and p
Extract and analyze themes, motifs, and symbolic patterns from story graphs. Always activate when the user mentions: "themes", "motifs", "symbolism", "symbolic meaning", "deeper meaning", "underlying message", "theme analysis", "recurring elements", "patterns in story", "symbolic objects", or asks about "what does this story mean", "what is the message", or "what themes are present". Also activate when user exports or validates story and wants to understand the thematic depth. This skill identifies explicit and implicit themes, tracks motif recurrence, and provides thematic arc analysis — not just a list of tags.
| name | mermaid |
| description | Render Mermaid diagrams as SVG or ASCII art using beautiful-mermaid. Use when users need to create flowcharts, sequence diagrams, state diagrams, class diagrams, or ER diagrams. Supports both graphical SVG output and terminal-friendly ASCII/Unicode output. |
Render Mermaid diagrams using beautiful-mermaid library. Supports 5 diagram types with dual output modes.
Dependencies (
beautiful-mermaid) auto-install on first run.
# From file
npx tsx scripts/render.ts diagram.mmd --output diagram.svg
# From stdin
echo "graph LR; A-->B-->C" | npx tsx scripts/render.ts --stdin --output flow.svg
# ASCII art for terminal display
npx tsx scripts/render.ts diagram.mmd --ascii
# Pipe directly
echo "graph TD; Start-->End" | npx tsx scripts/render.ts --stdin --ascii
Output example:
┌───────┐ ┌─────┐
│ Start │────▶│ End │
└───────┘ └─────┘
| Type | Syntax | Best For |
|---|---|---|
| Flowchart | graph TD/LR | Processes, decisions |
| Sequence | sequenceDiagram | API calls, interactions |
| State | stateDiagram-v2 | State machines |
| Class | classDiagram | OOP design |
| ER | erDiagram | Database schemas |
npx tsx scripts/render.ts diagram.mmd --theme github-dark --output out.svg
Use invalid theme name to see available themes list (e.g., --theme ?)
scripts/render.ts - Main rendering scriptreferences/syntax.md - Mermaid syntax quick reference