drawio-chart

Draw.io diagram expert

This skill is responsible for converting the user's diagram requirements into .drawio files, and exporting them to PNG, SVG, or PDF when needed.

The main file only keeps task routing, workflow, and acceptance rules. Detailed styles, XML templates, export commands, and examples are read on demand references/。

When to use

Prefer this skill in these scenarios:

• The user explicitly requests draw.io、diagrams.net or .drawio
• The user requests generation of flowcharts, architecture diagrams, sequence diagrams, ER diagrams, state machine diagrams, or mind maps
• The user wants to export diagrams as PNG / SVG / PDF
• The user wants illustrations for technical articles, tutorials, or system design documents
• The user provides an article and wants to extract multiple technical diagrams and put them into the same draw.io file

Cases not suitable for this skill:

• The user only wants Mermaid code and does not need .drawio
• The user needs bitmap illustrations, posters, or whiteboard-style body illustrations rather than structured diagrams
• The user is only discussing diagram ideas and does not yet want to actually generate files

Reference routing

Read the corresponding reference files as needed for the task; do not stuff all reference content into context by default:

Requirement	Read file
Colors, fonts, node semantics, connector styles, and visual consistency conventions	references/style-spec.md
XML structure rules, text label rules, node/connector templates, and structural suggestions for different diagram types	references/xml-and-layout.md
Export commands, file naming, how to open, and delivery rules	references/export-and-files.md
Common prompts, examples of illustrations for single-diagram/multi-diagram articles, and methods for batch page generation	references/use-cases.md

Core rules

• By default, first generate .drawio native files, then decide whether to export based on the user's request.
• If the user explicitly requests export to PNG / SVG / PDF, still first keep .drawio as the source file unless the user explicitly asks to delete it.
• When outputting diagrams, prioritize a clear information structure, then visual consistency; do not sacrifice readability for the sake of looking good.
• In diagrams, mxCell.value use plain text by default and avoid embedding HTML tags.
• Keep connector labels short; put long explanations preferably in nodes or annotation nodes.
• Do not explain basic concepts unless necessary; leave context for the constraints that truly affect the drawing result.

Diagram type selection

Choose diagrams according to the content structure; do not mechanically apply templates:

• Process steps, decision branches, algorithm logic: flowchart
• Module relationships, service dependencies, deployment layers: architecture diagram
• Service calls, message interactions, temporal processes: sequence diagram
• Entities, fields, primary/foreign key relationships: ER diagram
• Lifecycle, state transitions, event-driven: state machine diagram
• Concept organization, knowledge organization, hierarchical expansion: mind map

If the user specifies a diagram type, prioritize following the user's request; only when the user has clearly chosen the wrong diagram type should you briefly remind them and offer an alternative suggestion.

Workflow

1. Identify the task mode

First determine which of the following it is:

• Single diagram generation
• Single diagram generation and export
• Generate multiple diagrams from one article
• Modify an existing .drawio

2. Collect the minimum necessary input

At least clarify this information:

• Diagram topic
• Target diagram type
• Key nodes / modules / entities / steps
• Relationships between nodes
• Whether export is needed, and the export format

If the user's information is incomplete but can be reasonably inferred, infer directly and explain it in the result; only ask follow-up questions when key structural information is missing.

3. Read the corresponding reference materials

• When a unified visual style is needed, read references/style-spec.md
• When XML needs to be generated or layout needs to be determined, read references/xml-and-layout.md
• When export or naming is needed, read references/export-and-files.md
• When common prompts or article illustration patterns need to be shown to the user, read references/use-cases.md

4. Plan first, then generate

Before generating, clarify internally:

• Which diagram type to use
• Whether the page is one diagram or multiple diagram page
• How node groups are laid out
• Which connections need labels and which do not

Do not write XML while figuring out the structure on the fly.

5. Generate .drawio

Follow this order when generating:

1. Title
2. Containers / groups
3. Core nodes
4. Connections
5. Labels and side notes

6. Export or open

• When the user requests export, then perform the export
• When the user only requests generation, deliver by default .drawio
• If this machine does not have drawio CLI, clearly state that automatic export is not possible, but .drawio has been generated

Multi-diagram article mode

When the user provides an article and requests “generate multiple technical illustrations,” handle it according to these rules:

• First extract from the article the 2-6 structures most worth illustrating
• Each structure corresponds to an independent diagram page
• The main file name should by default remain consistent with the article file name
• Page names use lowercase English with hyphens
• Avoid cramming all the knowledge points of the entire article into one large diagram

For more detailed examples and prompt writing, read references/use-cases.md。

Verification checklist

Before delivery, at least check:

• Whether the diagram type matches the task
• Whether the main nodes are complete and the relationships are drawn correctly
• Whether the connections clearly convey direction and semantics
• Whether the text is concise, without long sentences pressed against the edges
• mxCell.value Whether HTML tags are mixed into
• Whether the exported file name complies with the naming convention
• If it is a multi-page file, whether the page names are clear and consistent

Failure handling

• If the user's requirements are too vague, first give the diagram structure you infer, then explain your assumptions
• If export fails, keep .drawio, report the failure reason and the export command that can be run manually
• If the content requested by the user is more suitable for Mermaid or image illustrations, clearly state this and suggest switching to a more appropriate method

Output requirements

• By default, return the generated file path
• If an export was performed, also return the exported file path
• If there are assumptions, omissions, or structural adjustments, explain them in one sentence