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