Generate editable diagrams from text descriptions

Diagram Generator creates clear, editable diagrams from messy or structured input: natural language, notes, code, schemas or existing diagram sources. It covers flowcharts, swimlanes, attack-path graphs, data-flow diagrams, architecture views and state machines, and turns textual analysis into Mermaid, Graphviz or UML-text visuals, including attack-path and architecture diagrams for reports. It is a community skill adapted from zhaoxuya520/reverse-skill under the MIT license. It prefers text-based diagram source first so results can be reviewed, versioned and refined, and renders to files only when the user asks for an image or PDF or when a downloadable artifact would clearly help.

The default workflow has six steps: identify the intent, audience and source material; choose the diagram family and language; normalize entities, relationships, labels, states, branches and ordering before writing any diagram code; generate concise, readable source; validate the syntax and, when creating files, run the render script; and return the source with a short note on assumptions plus links to any generated files. The agent should not over-ask: an underspecified request gets reasonable, briefly labeled assumptions.

Mermaid is the default unless another language is clearly better:

• Process flows, decision trees and simple swimlanes use a Mermaid flowchart.
• Sequences of system or user interactions use a Mermaid sequenceDiagram (or PlantUML sequence for UML formality).
• Lifecycles and state machines use stateDiagram-v2 or PlantUML state.
• Database schemas use erDiagram, class and object models use classDiagram or PlantUML class, project schedules use gantt, hierarchies use mindmap, customer journeys use journey, and git history uses gitGraph.
• Dependency graphs, package graphs and large dense networks use Graphviz DOT for its layout engines.
• Layered architectures with clusters and boundaries use a Mermaid flowchart with subgraphs, Graphviz clusters or PlantUML C4-style, depending on the fidelity requested.
• Weighted flows can use sankey-beta where supported, otherwise SVG or Graphviz.
• A custom visual that source languages fit poorly uses SVG.

Output policy: always give editable source unless the user asks only for an image, default to one best diagram, prefer stable simple syntax that older Mermaid and PlantUML versions render, use short labels with longer text moved to notes, use ASCII node IDs with human-readable labels, keep the user's terminology with consistent capitalization, include implied boundaries for technical diagrams (client, service, database, queue, external API, operator), distinguish happy path, decisions, failures, retries and manual steps for business processes, and add an Assumptions section when the input was uncertain.

Mermaid rules: start with the correct directive such as flowchart TD, sequenceDiagram, erDiagram, gantt, mindmap or journey; use flowchart TD by default and flowchart LR for architecture and pipelines; use subgraphs with readable names for swimlanes and layers; keep node IDs stable and ASCII, like ingest_service[Ingest Service]; quote labels with punctuation that may confuse the parser; use decision diamonds and consistent edge labels; declare participants before messages, with actor for humans and participant for systems; and use alt, opt, loop and par blocks for conditional, optional, repeated and parallel flows. Graphviz rules: use digraph for directed and graph for undirected relationships, set attributes such as rankdir=LR, nodesep, ranksep and splines=true at the top, use subgraph cluster_name for boundaries, keep styling restrained, add edge labels only when useful and avoid crossing-heavy all-to-all edges by grouping into clusters. PlantUML rules: wrap in @startuml and @enduml, use stereotypes such as actor, participant, database, queue and component, use package, rectangle or node for boundaries, show only important fields and methods in class diagrams unless asked, and give activity diagrams clear start and end markers and branch labels. SVG rules: keep it simple, accessible and editable, include a title and text labels, prefer rectangles, lines, arrows and groups over complex paths, and embed no external fonts or remote images.

Use it when turning textual analysis into Mermaid, Graphviz or UML-text visuals, or producing attack-path or architecture diagrams for reports. Trigger phrases include drawing a diagram, a flowchart, an architecture diagram, an attack-path diagram or a sequence diagram, and naming any of these languages. Complex auto-layouts may need manual adjustment in the target tool, and rendering fidelity depends on the available renderer.

Answers follow a common template: the editable source in a fenced code block for the chosen language, an Assumptions list only if needed, and a rendered file link only if generated. English requests get English replies and Chinese requests get Chinese replies unless asked otherwise. When PNG, SVG or PDF output is requested, create a source file and run the render script, for example:

python "<SKILL_ROOT>/diagram-generator/scripts/render_diagram.py" input.mmd --format svg --out output.svg

The same script renders .dot and .puml inputs. It is dependency-tolerant: it tries common local tools and prints installation hints when a renderer is missing instead of failing, and the agent must not claim an image was rendered unless the script finished successfully and the output file exists. Mermaid CLI (mmdc) can be installed globally with npm and renders Mermaid to PNG or SVG; Graphviz needs a manual install, and PlantUML needs Java and plantuml.jar. Renderers are only needed when the user explicitly asks for image or PDF files.

A validation checklist applies before finalizing: the diagram type matches the task, the source is syntactically plausible, labels are short enough to fit, edges and message order reflect the input accurately, assumptions are stated when the input was incomplete, and generated files exist and have nonzero size. A bundled patterns file gives compact templates for Mermaid flowcharts, swimlane-style flowcharts, architecture, sequence, ER, state, class, gantt, mindmap and journey diagrams, Graphviz dependency and clustered architecture graphs, PlantUML sequence and component diagrams, and an SVG fallback.

It suits engineers, analysts and technical writers who need reviewable, versionable diagram source quickly, with a rendered file when one is needed.