mermaid-diagrams

Render Mermaid syntax into SVG, PNG, or PDF outputs.

6|1|Updated Dec 29, 2025

Search Tags:#pdf #mermaid #rendering #svg #diagrams #mermaid-cli

Ready to run

npx skills add https://github.com/mgajewskik/opencode-config --skill mermaid-diagrams-mgajewskik

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/mgajewskik/opencode-config/tree/main/skills/mermaid-diagrams
Command: npx skills add https://github.com/mgajewskik/opencode-config --skill mermaid-diagrams-mgajewskik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mermaid-based diagrams often require turning text definitions into visual diagrams for documentation or UI previews. This skill provides a ready-to-use workflow to create and render Mermaid diagrams via the mermaid-cli (mmdc), enabling consistent visuals from plain text.

Core Features & Use Cases

Generate diagrams from Mermaid syntax and render them to SVG, PNG, or PDF.
Support a wide range of diagram types (flowchart, sequence, class, state, ER, Gantt, mind map, etc.) and styling options.
Use cases include engineering docs, architecture diagrams, README visuals, and lightweight diagrams in dashboards or docs.

Quick Start

Render a Mermaid diagram by providing its syntax and requesting an SVG output.

Frequently Asked Questions about mermaid-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render Mermaid diagrams into SVG or PDF files?▼

To render Mermaid diagrams into SVG or PDF, provide the Mermaid syntax and specify your desired output format. The skill parses .mmd or .md inputs, validates the syntax, and generates the visual file using mermaid-cli.

What is the best way to convert Mermaid syntax to PNG for engineering docs?▼

Converting Mermaid syntax to PNG for engineering docs is done by supplying the text definitions to the rendering workflow. It applies mermaid-cli to translate the plain text into a PNG image with optional theme and size configurations.

Can I use mermaid-cli to generate architecture diagrams from markdown?▼

Yes, mermaid-cli can generate architecture diagrams directly from markdown files. The skill supports input parsing of .md files, allowing you to extract and render Mermaid syntax blocks into visual diagrams for your documentation.

Does this Mermaid rendering workflow support different diagram types and themes?▼

This Mermaid rendering workflow supports a wide range of diagram types including flowchart, sequence, class, state, ER, Gantt, and mind maps. It also provides optional theme and size configurations to customize your visual outputs.

Why are my Mermaid diagrams not rendering correctly in my dashboard?▼

Mermaid diagrams may not render correctly in your dashboard if the input syntax is invalid. This skill includes syntax validation during input parsing to catch errors before applying the mermaid-cli rendering process.

Do I need mermaid-cli installed to generate PDF diagrams from text definitions?▼

Yes, generating PDF diagrams from text definitions relies on mermaid-cli (mmdc). The skill utilizes this command-line tool to process the plain text Mermaid syntax and produce the final PDF output.