skills.rest
chengzongcai
chengzongcaiCOMMUNITY
Explore all skills by this author →
GitHub

diagram-generator

Generate and render Mermaid, Graphviz DOT, PlantUML, and SVG diagrams from natural language or structured inputs.

21|8|Updated Aug 3, 2026
Search Tags:#mermaid#rendering#flowchart#svg#diagram#plantuml#graphviz
One-click install
npx skills add https://github.com/chengzongcai/reverse-skill-backup --skill diagram-generator-chengzongcai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-generator
Source: https://github.com/chengzongcai/reverse-skill-backup/tree/main/skills/diagram-generator
Command: npx skills add https://github.com/chengzongcai/reverse-skill-backup --skill diagram-generator-chengzongcai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Turning messy notes, code snippets, schemas, or verbal descriptions into clean, editable diagrams normally requires manual drawing tools and syntax knowledge. This Skill converts natural language and structured inputs directly into valid diagram source code and optionally renders it to image files. ## Core Features & Use Cases - Multi-language diagram generation: Produces Mermaid by default, Graphviz DOT for dense dependency graphs, PlantUML for formal UML, and raw SVG when text languages fall short. - Wide diagram coverage: Supports flowcharts, swimlanes, sequence diagrams, state machines, ER diagrams, class diagrams, Gantt charts, mind maps, user journeys, architecture diagrams, and network graphs. - Optional local rendering: Ships a dependency-tolerant Python script that renders source to SVG, PNG, or PDF using mmdc, Graphviz dot, or PlantUML, with actionable install hints when renderers are missing. - Use Case: Paste a database schema description and ask for an ER diagram; receive editable Mermaid erDiagram source plus a rendered SVG file for your documentation. ## Quick Start Ask the assistant to create a Mermaid flowchart of your deployment pipeline and render it to an SVG file.

Frequently Asked Questions about diagram-generator

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

FAQPage Schema
How do I generate a Mermaid diagram from text descriptions?▼

Describe your process, entities, or flow in natural language and request a Mermaid diagram. The Skill normalizes entities and relationships, then outputs editable Mermaid source such as flowchart TD, sequenceDiagram, or erDiagram that you can paste into Markdown.

Mermaid vs Graphviz vs PlantUML: which should I use for diagrams?▼

Use Mermaid for documentation-friendly flowcharts, sequences, and ER diagrams. Choose Graphviz DOT for large dense dependency or network graphs needing better layout engines. Pick PlantUML when you need formal UML notation like detailed class or component diagrams.

How do I render Mermaid diagrams to PNG or SVG files?▼

Run the included render_diagram.py script with your .mmd file and desired format. It requires the Mermaid CLI (mmdc), installable via npm install -g @mermaid-js/mermaid-cli; otherwise the script prints installation hints.

Can I render PlantUML diagrams without installing Java?▼

PlantUML rendering requires either the plantuml executable on PATH or Java plus the PLANTUML_JAR environment variable pointing to plantuml.jar. Without these, the script returns an error and you should use the PlantUML source directly.

Why does diagram rendering fail even though the source is valid?▼

Rendering fails when the required local renderer is missing: mmdc for Mermaid, dot for Graphviz, plantuml or Java for PlantUML, and rsvg-convert or inkscape for SVG conversion. The script reports which tool to install instead of failing silently.

When should I use raw SVG instead of Mermaid for diagrams?▼

Use SVG only when text-based languages cannot express the visual reliably, such as custom layouts needing precise positioning. Keep SVG simple with rectangles, lines, arrows, and title elements, and avoid external fonts or remote images.

Related Skills

Explore More Software Engineering Skills→
saif27217saif27217

drawio-skill

Generate diagrams, flowcharts, and visualizations from text descriptions using draw.io.

Community
Advanced
wfukatsuwfukatsu
8

render-mermaid

Converts CraftTweaker scripts and ZScript into formatted, hyperlinked HTML5 cookbook-style reference documents.

Community
Intermediate
JaronTamJaronTam

bmad-agent-tech-writer

Generate technical documentation with Mermaid diagrams and Python validation.

Community
Intermediate
ItsJooLItsJooL

d2

Write and render D2 diagram code to SVG without the d2 binary.

Community
Advanced