Run any Skill in Manus with one click

Get Started

visual-mermaid

Stars26

Forks10

UpdatedApril 19, 2026 at 06:30

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

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

guanyang

guanyang/llm-wiki

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

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

More from this repository

same repository

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