beautiful-mermaid

Name: beautiful-mermaid
Author: calesthio

315installs4.9kforks

How to install beautiful-mermaid?

calesthio/openmontage/beautiful-mermaid

$npx -y skills add calesthio/OpenMontage --skill beautiful-mermaid

Installs into the current project.

Summary

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

Files · 1

View on GitHub

SKILL.md

1	# Beautiful Mermaid Diagram Rendering
2
3	Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.
4
5	## Dependencies
6
7	This skill requires the `agent-browser` skill for PNG rendering. Load it before proceeding with PNG capture.
8
9	## Supported Diagram Types
10
11	- Flowchart - Process flows, decision trees, CI/CD pipelines
12	- Sequence - API calls, OAuth flows, database transactions
13	- State - State machines, connection lifecycles
14	- Class - UML class diagrams, design patterns
15	- Entity-Relationship - Database schemas, data models
16
17	## Available Themes
18
19	Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.
20
21	If no theme is specified, use `default`.
22
23	## Common Syntax Patterns
24
25	### Flowchart Edge Labels
26
27	Use pipe syntax for edge labels:
28
29	```mermaid
30	A -->\|label\| B
31	A ---\|label\| B
32	```
33
34	Avoid space-dash syntax which can cause incomplete renders:
35
36	```mermaid
37	A -- label --> B # May cause issues
38	```
39
40	### Node Labels with Special Characters
41
42	Wrap labels containing special characters in quotes:
43
44	```mermaid
45	A["Label with (parens)"]
46	B["Label with / slash"]
47	```
48
49	## Workflow
50
51	### Step 1: Generate or Validate Mermaid Code
52
53	If the user provides a description rather than code, generate valid Mermaid syntax. Consult `references/mermaid-syntax.md` for full syntax details.
54
55	### Step 2: Render SVG
56
57	Run the rendering script to produce an SVG file:
58
59	```bash
60	bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default
61	```
62
63	Or from a file:
64
65	```bash
66	bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night
67	```
68
69	Alternative runtimes:
70	```bash
71	npx tsx scripts/render.ts --code "..." --output diagram
72	deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram
73	```
74
75	This produces `<output>.svg` in the current working directory.
76
77	### Step 3: Create HTML Wrapper
78
79	Run the HTML wrapper script to prepare for screenshot:
80
81	```bash
82	bun run scripts/create-html.ts --svg diagram.svg --output diagram.html
83	```
84
85	This creates a minimal HTML file that displays the SVG with proper padding and background.
86
87	### Step 4: Capture High-Resolution PNG with agent-browser
88
89	Use the agent-browser CLI to capture a high-quality screenshot. Refer to the `agent-browser` skill for full CLI documentation.
90
91	```bash
92	# Set 4K viewport for high-resolution capture
93	agent-browser set viewport 3840 2160
94
95	# Open the HTML wrapper
96	agent-browser open "file://$(pwd)/diagram.html"
97
98	# Wait for render to complete
99	agent-browser wait 1000
100
101	# Capture full-page screenshot
102	agent-browser screenshot --full diagram.png
103
104	# Close browser
105	agent-browser close
106	```
107
108	For even higher resolution on complex diagrams, increase the viewport further or use the `--padding` option when creating the HTML wrapper to give the diagram more space.
109
110	### Step 5: Clean Up Intermediary Files
111
112	After rendering, remove all intermediary files. Only the final `.svg` and `.png` should remain.
113
114	Files to clean up:
115	- The HTML wrapper file (e.g., `diagram.html`)
116	- Any temporary `.mmd` files created to hold diagram code
117	- Any other files created during the rendering process
118
119	```bash
120	rm diagram.html
121	```
122
123	If a temporary `.mmd` file was created, remove it as well.
124
125	## Output
126
127	Both outputs are always produced:
128	- SVG: Vector format, infinitely scalable, small file size
129	- PNG: High-resolution raster, captured at 4K (3840×2160) viewport with minimum 1200px diagram width
130
131	Files are saved to the current working directory unless the user explicitly specifies a different path.
132
133	## Theme Selection Guide
134
135	\| Theme \| Background \| Best For \|
136	\|-------\|------------\|----------\|
137	\| default \| Light grey \| General use \|
138	\| dracula \| Dark purple \| Dark mode preference \|
139	\| tokyo-night \| Dark blue \| Modern dark aesthetic \|
140	\| tokyo-night-storm \| Darker blue \| Higher contrast \|
141	\| nord \| Dark arctic \| Muted, calm visuals \|
142	\| nord-light \| Light arctic \| Light mode with soft tones \|
143	\| github-dark \| GitHub dark \| Matches GitHub UI \|
144	\| github-light \| GitHub light \| Matches GitHub UI \|
145	\| catppuccin-latte \| Warm light \| Soft pastel aesthetic \|
146	\| solarized \| Tan/cream \| Solarized colour scheme \|
147	\| one-dark \| Atom dark \| Atom editor aesthetic \|
148	\| zinc-dark \| Neutral dark \| Minimal, no colour bias \|
149
150	## Troubleshooting
151
152	### Theme not applied
153
154	Check the render script output for the `bg` and `fg` values, or inspect the SVG's opening tag for `--bg` and `--fg` CSS custom properties.
155
156	### Diagram appears cut off or incomplete
157
158	- Check edge label syntax — use `-->\|label\|` pipe notation, not `-- label -->`
159	- Verify all node IDs are unique
160	- Check for unclosed brackets in node labels
161
162	### Render produces empty or malformed SVG
163
164	- Validate Mermaid syntax at https://mermaid.live bef

People who liked this also viewed

6 picks

Type

ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026292k642
imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026165k66k
hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026145k37k
media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026144k37k
general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026124k37k
product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026121k37k

beautiful-mermaid

315installs4.9kforks

View on GitHub

How to install beautiful-mermaid?

calesthio/openmontage/beautiful-mermaid

$npx -y skills add calesthio/OpenMontage --skill beautiful-mermaid

Installs into the current project.

Summary

Render Mermaid diagrams as SVG and PNG using the Beautiful Mermaid library. Use when the user asks to render a Mermaid diagram.

Files · 1

View on GitHub

SKILL.md

1	# Beautiful Mermaid Diagram Rendering
2
3	Render Mermaid diagrams as SVG and PNG images using the Beautiful Mermaid library.
4
5	## Dependencies
6
7	This skill requires the `agent-browser` skill for PNG rendering. Load it before proceeding with PNG capture.
8
9	## Supported Diagram Types
10
11	- Flowchart - Process flows, decision trees, CI/CD pipelines
12	- Sequence - API calls, OAuth flows, database transactions
13	- State - State machines, connection lifecycles
14	- Class - UML class diagrams, design patterns
15	- Entity-Relationship - Database schemas, data models
16
17	## Available Themes
18
19	Default, Dracula, Solarized, Zinc Dark, Tokyo Night, Tokyo Night Storm, Tokyo Night Light, Catppuccin Latte, Nord, Nord Light, GitHub Dark, GitHub Light, One Dark.
20
21	If no theme is specified, use `default`.
22
23	## Common Syntax Patterns
24
25	### Flowchart Edge Labels
26
27	Use pipe syntax for edge labels:
28
29	```mermaid
30	A -->\|label\| B
31	A ---\|label\| B
32	```
33
34	Avoid space-dash syntax which can cause incomplete renders:
35
36	```mermaid
37	A -- label --> B # May cause issues
38	```
39
40	### Node Labels with Special Characters
41
42	Wrap labels containing special characters in quotes:
43
44	```mermaid
45	A["Label with (parens)"]
46	B["Label with / slash"]
47	```
48
49	## Workflow
50
51	### Step 1: Generate or Validate Mermaid Code
52
53	If the user provides a description rather than code, generate valid Mermaid syntax. Consult `references/mermaid-syntax.md` for full syntax details.
54
55	### Step 2: Render SVG
56
57	Run the rendering script to produce an SVG file:
58
59	```bash
60	bun run scripts/render.ts --code "graph TD; A-->B" --output diagram --theme default
61	```
62
63	Or from a file:
64
65	```bash
66	bun run scripts/render.ts --input diagram.mmd --output diagram --theme tokyo-night
67	```
68
69	Alternative runtimes:
70	```bash
71	npx tsx scripts/render.ts --code "..." --output diagram
72	deno run --allow-read --allow-write --allow-net scripts/render.ts --code "..." --output diagram
73	```
74
75	This produces `<output>.svg` in the current working directory.
76
77	### Step 3: Create HTML Wrapper
78
79	Run the HTML wrapper script to prepare for screenshot:
80
81	```bash
82	bun run scripts/create-html.ts --svg diagram.svg --output diagram.html
83	```
84
85	This creates a minimal HTML file that displays the SVG with proper padding and background.
86
87	### Step 4: Capture High-Resolution PNG with agent-browser
88
89	Use the agent-browser CLI to capture a high-quality screenshot. Refer to the `agent-browser` skill for full CLI documentation.
90
91	```bash
92	# Set 4K viewport for high-resolution capture
93	agent-browser set viewport 3840 2160
94
95	# Open the HTML wrapper
96	agent-browser open "file://$(pwd)/diagram.html"
97
98	# Wait for render to complete
99	agent-browser wait 1000
100
101	# Capture full-page screenshot
102	agent-browser screenshot --full diagram.png
103
104	# Close browser
105	agent-browser close
106	```
107
108	For even higher resolution on complex diagrams, increase the viewport further or use the `--padding` option when creating the HTML wrapper to give the diagram more space.
109
110	### Step 5: Clean Up Intermediary Files
111
112	After rendering, remove all intermediary files. Only the final `.svg` and `.png` should remain.
113
114	Files to clean up:
115	- The HTML wrapper file (e.g., `diagram.html`)
116	- Any temporary `.mmd` files created to hold diagram code
117	- Any other files created during the rendering process
118
119	```bash
120	rm diagram.html
121	```
122
123	If a temporary `.mmd` file was created, remove it as well.
124
125	## Output
126
127	Both outputs are always produced:
128	- SVG: Vector format, infinitely scalable, small file size
129	- PNG: High-resolution raster, captured at 4K (3840×2160) viewport with minimum 1200px diagram width
130
131	Files are saved to the current working directory unless the user explicitly specifies a different path.
132
133	## Theme Selection Guide
134
135	\| Theme \| Background \| Best For \|
136	\|-------\|------------\|----------\|
137	\| default \| Light grey \| General use \|
138	\| dracula \| Dark purple \| Dark mode preference \|
139	\| tokyo-night \| Dark blue \| Modern dark aesthetic \|
140	\| tokyo-night-storm \| Darker blue \| Higher contrast \|
141	\| nord \| Dark arctic \| Muted, calm visuals \|
142	\| nord-light \| Light arctic \| Light mode with soft tones \|
143	\| github-dark \| GitHub dark \| Matches GitHub UI \|
144	\| github-light \| GitHub light \| Matches GitHub UI \|
145	\| catppuccin-latte \| Warm light \| Soft pastel aesthetic \|
146	\| solarized \| Tan/cream \| Solarized colour scheme \|
147	\| one-dark \| Atom dark \| Atom editor aesthetic \|
148	\| zinc-dark \| Neutral dark \| Minimal, no colour bias \|
149
150	## Troubleshooting
151
152	### Theme not applied
153
154	Check the render script output for the `bg` and `fg` values, or inspect the SVG's opening tag for `--bg` and `--fg` CSS custom properties.
155
156	### Diagram appears cut off or incomplete
157
158	- Check edge label syntax — use `-->\|label\|` pipe notation, not `-- label -->`
159	- Verify all node IDs are unique
160	- Check for unclosed brackets in node labels
161
162	### Render produces empty or malformed SVG
163
164	- Validate Mermaid syntax at https://mermaid.live bef

People who liked this also viewed

6 picks

Type