drawio

What This Skill Does

The drawio skill is a powerful diagramming agent designed to convert user concepts into professional-grade visuals. Instead of relying on manual drag-and-drop tools, this skill generates native draw.io (mxGraph) XML directly within the agent workflow. It covers a vast spectrum of diagram types including flowcharts, software architecture models, UML sequences, class diagrams, ER diagrams for database modeling, and complex network topologies. By using this skill, you bypass the need for external tools during the initial drafting phase, allowing the agent to define node hierarchies, aesthetic styles, and edge relationships programmatically, then export the final result to PNG, SVG, or PDF formats.

Installation

To integrate this capability into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/brucevanfdm/drawio-exporter-skill

Ensure that you have the necessary desktop CLI dependencies installed if you intend to trigger direct exports from the agent environment.

Use Cases

• Software Engineering: Visualize microservices architecture or track system data flow.
• Project Management: Generate process flowcharts or decision trees for stakeholders.
• Database Administration: Model entities and relationship cardinalities using ER diagram notation.
• Educational: Create mindmaps to organize study materials or complex logical concepts.
• Network Engineering: Map out physical or virtual network infrastructure layouts.

Example Prompts

1. "Draw a flowchart for a user authentication process including login, password reset, and registration flows."
2. "Visualize a microservices architecture showing an API Gateway, Authentication Service, User DB, and Order Microservice."
3. "Create a sequence diagram representing a user uploading a file to an S3 bucket via a signed URL."

Tips & Limitations

• XML Accuracy: The skill writes raw XML. While highly efficient, ensure that node IDs are unique to avoid collision errors in the draw.io renderer.
• Styling: Utilize the style attribute in the generated XML to customize colors, shapes, and fonts. For complex diagrams, define common styles early in the generation process.
• Layout: The skill defaults to absolute positioning. If your diagram is dense, ensure proper padding between mxGeometry coordinates to avoid overlapping elements.
• Self-Review: Always review the generated XML structure if your diagram is highly nested, as logical relationships must be explicitly defined using the parent attribute.