How does the browser rendering work?

The skill creates a temporary HTML file with your diagram embedded in an iframe, then starts a local Python HTTP server to serve the file to your default browser automatically.

Does this skill require a Draw.io account?

No, it generates XML and uses the open-source diagrams.net viewer to render diagrams in your browser without requiring an account or login.

What types of diagrams can I create?

You can generate flowcharts, mind maps, organizational charts, and complex cloud architecture diagrams using built-in support for AWS shapes.

Is the generated XML editable after creation?

Absolutely. The skill generates standard Draw.io XML which can be saved as a .drawio file and imported into the diagrams.net editor for further manual adjustments.

Can I customize the colors and styles of the diagrams?

Yes, while the skill follows a predefined color palette for consistency, you can prompt Claude to use specific colors, rounded corners, or animated connectors during the generation process.

AI Draw.io Diagram Generator

Name: AI Draw.io Diagram Generator
Author: jarrett-au

byjarrett-au

0•

Design Tools

Generates professional-grade Draw.io diagrams from natural language descriptions and renders them directly in your browser.

This skill empowers developers to transform complex ideas into visual architecture diagrams, flowcharts, and mind maps using Draw.io XML generation. By leveraging automated layout rules, precise edge routing, and cloud-specific icon sets like AWS, it handles the tedious task of manual positioning and styling. It provides a seamless end-to-end workflow by generating valid XML, embedding it into a custom HTML viewer, and launching a local server to visualize the result instantly, making it an essential tool for documentation and system design.

Key Features

01Standardized color palettes for process flows, decisions, and system states

020 GitHub stars

03Automatic XML generation compatible with Draw.io and diagrams.net

04Support for specialized cloud architecture shapes including AWS icon sets

05Smart edge routing with non-overlapping paths and bidirectional connections

06Instant browser preview via automated HTML rendering and local server hosting

Use Cases

01Visualizing CI/CD pipelines and business logic flowcharts

02Creating cloud infrastructure diagrams with specific AWS service icons

03Documenting complex software architectures and microservices workflows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jarrett-au/cc-config-starter diagram-generator

For use in Claude.ai and ChatGPT

Key Features

01Standardized color palettes for process flows, decisions, and system states

020 GitHub stars

03Automatic XML generation compatible with Draw.io and diagrams.net

04Support for specialized cloud architecture shapes including AWS icon sets

05Smart edge routing with non-overlapping paths and bidirectional connections

06Instant browser preview via automated HTML rendering and local server hosting

Use Cases

01Visualizing CI/CD pipelines and business logic flowcharts

02Creating cloud infrastructure diagrams with specific AWS service icons

03Documenting complex software architectures and microservices workflows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jarrett-au/cc-config-starter diagram-generator

For use in Claude.ai and ChatGPT