skills.rest
dbx0
dbx0COMMUNITY
Explore all skills by this author →
WebsiteGitHub

diagram-generator

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

7|4|Updated Jun 22, 2026
Search Tags:#mermaid#rendering#flowchart#svg#diagram#plantuml#graphviz
One-click install
npx skills add https://github.com/dbx0/skills --skill diagram-generator-dbx0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-generator
Source: https://github.com/dbx0/skills/tree/main/skills/_tooling/diagram-generator
Command: npx skills add https://github.com/dbx0/skills --skill diagram-generator-dbx0

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning notes, code snippets, schemas, or rough descriptions into clean, editable diagrams is slow and error-prone when done by hand. This Skill produces syntactically valid diagram source in the right language for the task and optionally renders it to PNG, SVG, or PDF 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. - Decision-table language selection: Picks the right diagram family (flowchart, sequence, ER, state, class, gantt, mindmap, journey, architecture) based on the user's intent. - Dependency-tolerant rendering: The render_diagram.py script detects available local renderers (mmdc, dot, plantuml, rsvg-convert, inkscape) and prints actionable install hints instead of failing silently. - Use Case: Paste a database schema description and ask for an ER diagram; receive editable Mermaid erDiagram source plus a rendered SVG file for embedding in documentation. ## Quick Start Ask the assistant to create a Mermaid sequence diagram showing how a user request flows through your web app, API, and database, and render it as 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 the process, entities, or interactions in plain language and the Skill normalizes them into Mermaid source such as flowchart TD, sequenceDiagram, or erDiagram. The output is editable text you can paste into Markdown or render to an image file.

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, and PlantUML when formal UML notation like detailed class or component diagrams is required.

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

Run the included render_diagram.py script with the input .mmd file and desired format. It requires the Mermaid CLI (mmdc), installable via npm install -g @mermaid-js/mermaid-cli; otherwise it returns the source with an installation hint.

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 reports the requirement and you can still use the PlantUML source directly.

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

Rendering fails when the required local tool is missing: mmdc for Mermaid, dot for Graphviz, plantuml or Java for PlantUML, and rsvg-convert or inkscape for SVG conversion. The script prints which tool to install instead of erroring 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 the SVG simple with rectangles, lines, arrows, and a title element, and avoid external fonts or remote images.

Related Skills

Explore More Software Engineering Skills→
jtucker9jtucker9

sight

Generate Mermaid diagrams from database, API, and component structures.

Community
Intermediate
odylithodylith
34

odylith-atlas-render

Render Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.

Official
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