visual-mermaid

スター26

フォーク10

更新日2026年4月19日 06:30

Generate syntactically safe Mermaid diagrams from text. Triggers on "Mermaid", "画图", "流程图", "思维导图", "mermaid diagram".

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

guanyang

guanyang/llm-wiki

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

Mermaid Creator

Generate syntactically safe, professional Mermaid diagrams.

Workflow

1. Analyze: Identify graph type (Flowchart, Sequence, Mindmap, etc.) and direction (TB/LR).
2. Draft: Create nodes and edges. Strictly adhere to syntax gotchas (especially list syntax conflicts).
3. Style: Apply professional semantic colors to nodes.
4. Output: Wrap in ```mermaid code fence. Save output or print directly to user.

Gotchas & Syntax Rules (CRITICAL)

Number List Conflict: 1. Text will break Markdown parsers. MUST USE 1.Text (no space), ① Text, or [1] Text.
Subgraph Naming: Subgraphs with spaces MUST use IDs: subgraph core["Core Process"]. Never subgraph Core Process.
Node References: Edges must connect node IDs, never node labels. (e.g. A --> B, not Title --> B).
Forbidden Characters in Labels: Replace " with 『』 and () with 「」.
Line Breaks: HTML <br/> only works reliably in circular nodes (( )). Use separate nodes for long text.

Color Palette (Inline Styling)

Apply via style NodeID fill:#hex,stroke:#hex,stroke-width:2px

Input/Success: fill:#d3f9d8,stroke:#2f9e44
Process/Logic: fill:#e5dbff,stroke:#5f3dc4
Action/Highlight: fill:#ffe8cc,stroke:#d9480f
Output/Result: fill:#c5f6fa,stroke:#0c8599
Title/Header: fill:#1971c2,stroke:#1971c2,color:#ffffff
Neutral/Background: fill:#f8f9fa,stroke:#dee2e6

References

File	Content	Tokens
`references/syntax-rules.md`	Detailed syntax edge cases & advanced layout patterns	~200

このリポジトリの他の Skills

同じリポジトリ

visual-canvas

guanyang/llm-wiki

Create Obsidian Canvas (.canvas) files to visualize information, create mind maps, or organize notes spatially. Use this skill when the user wants to "see" their data, map out relationships, brainstorm topics, or convert text outlines into visual diagrams, even if they don't explicitly mention "Canvas."

2026-04-1926

visual-excalidraw

guanyang/llm-wiki

Generate Excalidraw diagrams from text content. Supports Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order) modes. Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram", "standard excalidraw", "animate".

2026-04-1926

llm-wiki

guanyang/llm-wiki

Use this skill when the user wants to digest notes or articles into a structured wiki, ask questions answered from compiled knowledge, check wiki health, produce polished deliverables (blog posts, reports, slides), or verify whether wiki content is still up-to-date. Activate even if the user doesn't say "wiki" — phrases like "organize this", "digest this article", "look this up for me", "write a blog post", "check the knowledge base" all qualify.

2026-04-1926

name	visual-mermaid
description	Generate syntactically safe Mermaid diagrams from text. Triggers on "Mermaid", "画图", "流程图", "思维导图", "mermaid diagram".

Mermaid Creator

Generate syntactically safe, professional Mermaid diagrams.

Workflow

1. Analyze: Identify graph type (Flowchart, Sequence, Mindmap, etc.) and direction (TB/LR).
2. Draft: Create nodes and edges. Strictly adhere to syntax gotchas (especially list syntax conflicts).
3. Style: Apply professional semantic colors to nodes.
4. Output: Wrap in ```mermaid code fence. Save output or print directly to user.

Gotchas & Syntax Rules (CRITICAL)

Number List Conflict: 1. Text will break Markdown parsers. MUST USE 1.Text (no space), ① Text, or [1] Text.
Subgraph Naming: Subgraphs with spaces MUST use IDs: subgraph core["Core Process"]. Never subgraph Core Process.
Node References: Edges must connect node IDs, never node labels. (e.g. A --> B, not Title --> B).
Forbidden Characters in Labels: Replace " with 『』 and () with 「」.
Line Breaks: HTML <br/> only works reliably in circular nodes (( )). Use separate nodes for long text.

Color Palette (Inline Styling)

Apply via style NodeID fill:#hex,stroke:#hex,stroke-width:2px

Input/Success: fill:#d3f9d8,stroke:#2f9e44
Process/Logic: fill:#e5dbff,stroke:#5f3dc4
Action/Highlight: fill:#ffe8cc,stroke:#d9480f
Output/Result: fill:#c5f6fa,stroke:#0c8599
Title/Header: fill:#1971c2,stroke:#1971c2,color:#ffffff
Neutral/Background: fill:#f8f9fa,stroke:#dee2e6

References

File	Content	Tokens
`references/syntax-rules.md`	Detailed syntax edge cases & advanced layout patterns	~200