mermaid-visualizer

Name: mermaid-visualizer
Author: kv0906

2installs33forks

How to install mermaid-visualizer?

kv0906/pm-kit/mermaid-visualizer

$npx -y skills add kv0906/pm-kit --skill mermaid-visualizer

Installs into the current project.

Summary

Transform text content into professional Mermaid diagrams for presentations and documentation. Use when users ask to visualize concepts, create flowcharts, or make diagrams from text. Supports process flows, system architectures, comparisons, mindmaps, and more with built-in synt

Files · 1

View on GitHub

SKILL.md

1	# Mermaid Visualizer
2
3	## Overview
4
5	Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.
6
7	## Quick Start
8
9	When creating a Mermaid diagram:
10
11	1. Analyze the content - Identify key concepts, relationships, and flow
12	2. Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
13	3. Select configuration - Determine layout, detail level, and styling
14	4. Generate diagram - Create syntactically correct Mermaid code
15	5. Output in markdown - Wrap in proper code fence with optional explanation
16
17	Default assumptions:
18	- Vertical layout (TB) unless horizontal requested
19	- Medium detail level (balanced between simplicity and information)
20	- Professional color scheme with semantic colors
21	- Obsidian/GitHub compatible syntax
22
23	## Diagram Types
24
25	### 1. Process Flow (graph TB/LR)
26	Best for: Workflows, decision trees, sequential processes, AI agent architectures
27
28	Use when: Content describes steps, stages, or a sequence of actions
29
30	Key features:
31	- Swimlanes via subgraph for grouping related steps
32	- Arrow labels for transitions
33	- Feedback loops and branches
34	- Color-coded stages
35
36	Configuration options:
37	- `layout`: "vertical" (TB), "horizontal" (LR)
38	- `detail`: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)
39	- `style`: "minimal", "professional", "colorful"
40
41	### 2. Circular Flow (graph TD with circular layout)
42	Best for: Cyclic processes, continuous improvement loops, agent feedback systems
43
44	Use when: Content emphasizes iteration, feedback, or circular relationships
45
46	Key features:
47	- Central hub with radiating elements
48	- Curved feedback arrows
49	- Clear cycle indicators
50
51	### 3. Comparison Diagram (graph TB with parallel paths)
52	Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems
53
54	Use when: Content contrasts two or more approaches or systems
55
56	Key features:
57	- Side-by-side layout
58	- Central comparison node
59	- Clear differentiation via color/style
60
61	### 4. Mindmap
62	Best for: Hierarchical concepts, knowledge organization, topic breakdowns
63
64	Use when: Content is hierarchical with clear parent-child relationships
65
66	Key features:
67	- Radial tree structure
68	- Multiple levels of nesting
69	- Clean visual hierarchy
70
71	### 5. Sequence Diagram
72	Best for: Interactions between components, API calls, message flows
73
74	Use when: Content involves communication between actors/systems over time
75
76	Key features:
77	- Timeline-based layout
78	- Clear actor separation
79	- Activation boxes for processes
80
81	### 6. State Diagram
82	Best for: System states, status transitions, lifecycle stages
83
84	Use when: Content describes states and transitions between them
85
86	Key features:
87	- Clear state nodes
88	- Labeled transitions
89	- Start and end states
90
91	## Critical Syntax Rules
92
93	Always follow these rules to prevent parsing errors:
94
95	### Rule 1: Avoid List Syntax Conflicts
96	```
97	❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
98	✅ RIGHT: [1.Perception] → Remove space after period
99	✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
100	✅ RIGHT: [(1) Perception] → Use parentheses
101	✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
102	```
103
104	### Rule 2: Subgraph Naming
105	```
106	❌ WRONG: subgraph AI Agent Core → Space in name without quotes
107	✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
108	✅ RIGHT: subgraph agent → Use simple ID only
109	```
110
111	### Rule 3: Node References
112	```
113	❌ WRONG: Title --> AI Agent Core → Reference display name directly
114	✅ RIGHT: Title --> agent → Reference subgraph ID
115	```
116
117	### Rule 4: Special Characters in Node Text
118	```
119	✅ Use quotes for text with spaces: ["Text with spaces"]
120	✅ Escape or avoid: quotation marks → use 『』instead
121	✅ Escape or avoid: parentheses → use 「」instead
122	✅ Line breaks in circle nodes only: ((Text<br/>Break))
123	```
124
125	### Rule 5: Arrow Types
126	- `-->` solid arrow
127	- `-.->` dashed arrow (for supporting systems, optional paths)
128	- `==>` thick arrow (for emphasis)
129	- `~~~` invisible link (for layout only)
130
131	For complete syntax reference and edge cases, see [references/syntax-rules.md](references/syntax-rules.md)
132
133	## Configuration Options
134
135	All diagrams accept these parameters:
136
137	Layout:
138	- `direction`: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)
139	- `aspect`: "portrait" (default), "landscape" (wide), "square"

People who liked this also viewed

6 picks

Type

mermaid-visualizer

2installs33forks

View on GitHub

How to install mermaid-visualizer?

kv0906/pm-kit/mermaid-visualizer

$npx -y skills add kv0906/pm-kit --skill mermaid-visualizer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Mermaid Visualizer
2
3	## Overview
4
5	Convert text content into clean, professional Mermaid diagrams optimized for presentations and documentation. Automatically handles common syntax pitfalls (list syntax conflicts, subgraph naming, spacing issues) to ensure diagrams render correctly in Obsidian, GitHub, and other Mermaid-compatible platforms.
6
7	## Quick Start
8
9	When creating a Mermaid diagram:
10
11	1. Analyze the content - Identify key concepts, relationships, and flow
12	2. Choose diagram type - Select the most appropriate visualization (see Diagram Types below)
13	3. Select configuration - Determine layout, detail level, and styling
14	4. Generate diagram - Create syntactically correct Mermaid code
15	5. Output in markdown - Wrap in proper code fence with optional explanation
16
17	Default assumptions:
18	- Vertical layout (TB) unless horizontal requested
19	- Medium detail level (balanced between simplicity and information)
20	- Professional color scheme with semantic colors
21	- Obsidian/GitHub compatible syntax
22
23	## Diagram Types
24
25	### 1. Process Flow (graph TB/LR)
26	Best for: Workflows, decision trees, sequential processes, AI agent architectures
27
28	Use when: Content describes steps, stages, or a sequence of actions
29
30	Key features:
31	- Swimlanes via subgraph for grouping related steps
32	- Arrow labels for transitions
33	- Feedback loops and branches
34	- Color-coded stages
35
36	Configuration options:
37	- `layout`: "vertical" (TB), "horizontal" (LR)
38	- `detail`: "simple" (core steps only), "standard" (with descriptions), "detailed" (with annotations)
39	- `style`: "minimal", "professional", "colorful"
40
41	### 2. Circular Flow (graph TD with circular layout)
42	Best for: Cyclic processes, continuous improvement loops, agent feedback systems
43
44	Use when: Content emphasizes iteration, feedback, or circular relationships
45
46	Key features:
47	- Central hub with radiating elements
48	- Curved feedback arrows
49	- Clear cycle indicators
50
51	### 3. Comparison Diagram (graph TB with parallel paths)
52	Best for: Before/after comparisons, A vs B analysis, traditional vs modern systems
53
54	Use when: Content contrasts two or more approaches or systems
55
56	Key features:
57	- Side-by-side layout
58	- Central comparison node
59	- Clear differentiation via color/style
60
61	### 4. Mindmap
62	Best for: Hierarchical concepts, knowledge organization, topic breakdowns
63
64	Use when: Content is hierarchical with clear parent-child relationships
65
66	Key features:
67	- Radial tree structure
68	- Multiple levels of nesting
69	- Clean visual hierarchy
70
71	### 5. Sequence Diagram
72	Best for: Interactions between components, API calls, message flows
73
74	Use when: Content involves communication between actors/systems over time
75
76	Key features:
77	- Timeline-based layout
78	- Clear actor separation
79	- Activation boxes for processes
80
81	### 6. State Diagram
82	Best for: System states, status transitions, lifecycle stages
83
84	Use when: Content describes states and transitions between them
85
86	Key features:
87	- Clear state nodes
88	- Labeled transitions
89	- Start and end states
90
91	## Critical Syntax Rules
92
93	Always follow these rules to prevent parsing errors:
94
95	### Rule 1: Avoid List Syntax Conflicts
96	```
97	❌ WRONG: [1. Perception] → Triggers "Unsupported markdown: list"
98	✅ RIGHT: [1.Perception] → Remove space after period
99	✅ RIGHT: [① Perception] → Use circled numbers (①②③④⑤⑥⑦⑧⑨⑩)
100	✅ RIGHT: [(1) Perception] → Use parentheses
101	✅ RIGHT: [Step 1: Perception] → Use "Step" prefix
102	```
103
104	### Rule 2: Subgraph Naming
105	```
106	❌ WRONG: subgraph AI Agent Core → Space in name without quotes
107	✅ RIGHT: subgraph agent["AI Agent Core"] → Use ID with display name
108	✅ RIGHT: subgraph agent → Use simple ID only
109	```
110
111	### Rule 3: Node References
112	```
113	❌ WRONG: Title --> AI Agent Core → Reference display name directly
114	✅ RIGHT: Title --> agent → Reference subgraph ID
115	```
116
117	### Rule 4: Special Characters in Node Text
118	```
119	✅ Use quotes for text with spaces: ["Text with spaces"]
120	✅ Escape or avoid: quotation marks → use 『』instead
121	✅ Escape or avoid: parentheses → use 「」instead
122	✅ Line breaks in circle nodes only: ((Text<br/>Break))
123	```
124
125	### Rule 5: Arrow Types
126	- `-->` solid arrow
127	- `-.->` dashed arrow (for supporting systems, optional paths)
128	- `==>` thick arrow (for emphasis)
129	- `~~~` invisible link (for layout only)
130
131	For complete syntax reference and edge cases, see [references/syntax-rules.md](references/syntax-rules.md)
132
133	## Configuration Options
134
135	All diagrams accept these parameters:
136
137	Layout:
138	- `direction`: "vertical" (TB), "horizontal" (LR), "right-to-left" (RL), "bottom-to-top" (BT)
139	- `aspect`: "portrait" (default), "landscape" (wide), "square"

People who liked this also viewed

6 picks

Type