everything-drawio-mind

English | 中文

---

English

Introduction

everything-drawio-mind is a powerful Draw.io graph processing pipeline that converts AI-generated content into professional, structured, and directly publishable Draw.io graph format.

This project automates the transformation from raw AI output to visual XML documents that can be directly opened and previewed in draw.io, suitable for report generation, document organization, and content publishing.

Features

• Intelligent Logic Organization: Reorganizes unstructured text into clear hierarchy and logically rigorous structure
• Format Conversion: Converts logically organized content into standard Draw.io XML format with correct tag semantics
• Visual Beautification: Applies professional styling, color schemes, and visual effects to create beautiful diagrams
• Position Adjustment: Automatically adjusts element positions to ensure beautiful layout and avoid interference
• Multi-format Support: Supports various diagram types including flowcharts, organization charts, UML diagrams, and more

Architecture

The pipeline consists of four coordinated sub-skills:

1. logic-organizer: Content logic organization expert
2. drawio-format-adapter: Draw.io XML format adapter
3. drawio-xml-beautifier: Draw.io XML chart beautification guide
4. drawio-position-adjuster: Element position adjustment specialist

Installation

Prerequisites

• Node.js (>= 14.x)
• Python (>= 3.8)
• draw.io or diagrams.net for viewing generated graphs
• libxml2-utils for XML validation (optional but recommended)

Setup

# Clone the repository
git clone https://github.com/smith-source/everything-drawio-mind.git
mv everything-drawio-mind ~/.claude/skills/

XML Validation Tool

For XML format validation, install xmllint:

# Check if xmllint is installed (automated)
bash sub-skills/drawio-format-adapter/scripts/check_format.sh

# Or manually install
sudo apt-get install libxml2-utils

Usage

Basic Usage

Use the everything-drawio-mind skill to convert content to Draw.io graphs:

# Invoke the skill
/everything-drawio-mind your_question

Workflow

1. Input Analysis: Analyze the type and structure of your content
2. Logic Organization: Organize content into clear hierarchy
3. Format Conversion: Convert to standard XML format
4. Beautification: Apply visual styling and effects
5. Position Adjustment: Optimize layout and element positions
6. Output Delivery: Receive complete XML files

Input Format

• Original Agent output text (any format)
• Target document type (optional): report/manual/guide/presentation
• Style preference (optional): business/academic/simple/lively

Output Specification

The final output is a .xml file containing:

• Semantic tag structure
• Embedded style definitions
• Responsive layout support

Examples

Sample Output Diagrams

Here are some examples of diagrams generated by everything-drawio-mind:

VLA Mind Graph

Gemma Architecture Diagram

LLM Technology Stack

File Structure

everything-drawio-mind/
├── sub-skills/
│   ├── logic-organizer/
│   │   └── SKILL.md
│   ├── drawio-format-adapter/
│   │   ├── SKILL.md
│   │   └── scripts/
│   │       └── check_format.sh
│   ├── drawio-xml-beautifier/
│   │   └── SKILL.md
│   ├── drawio-position-adjuster/
│   │   └── SKILL.md
│   └── reference/
│       ├── xml-reference.md
│       ├── mermaid-reference.md
│       ├── style-reference.md
│       └── mxfile.xsd
├── SKILL.md
├── README.md
└── README.zh.md

Documentation

Comprehensive documentation is available in each sub-skill:

• Logic Organizer - Content organization principles
• Format Adapter - XML format specifications
• XML Beautifier - Style and beautification guide
• Position Adjuster - Layout and positioning strategies

Supported Diagram Types

Diagram Type	Layout Style	Recommended Direction
Flowchart	Hierarchical Layout	Top-down
Organization Chart	Tree Layout	Top-down
Class Diagram	Grid Layout	Top-down or left-to-right
State Diagram	Circular Layout	Circular direction
Sequence Diagram	Horizontal Layout	Left-to-right
Architecture Diagram	Layered Layout	Top-down

Best Practices

1. Input Quality: Provide clear, well-structured input content for best results
2. Style Consistency: Choose a consistent style throughout your document
3. Element Spacing: Ensure adequate spacing between elements for readability
4. Text Containment: Ensure all text is fully contained within element boundaries
5. Connection Logic: Maintain logical connection relationships between elements

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Support

For support, please open an issue on GitHub or contact the maintainers.

Acknowledgments

• draw.io / diagrams.net for providing an excellent diagramming platform
• The open-source community for inspiration and contributions