# Drawio Impl Mindmaps

> >

- **Type:** Skill
- **Install:** `agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-mindmaps`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Impertio-Studio](https://agentstack.voostack.com/s/impertio-studio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-impl/drawio-impl-mindmaps

## Install

```sh
agentstack add skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-mindmaps
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Draw.io Implementation: Mind Maps

## Purpose

This skill teaches how to create mind maps, concept maps, and radial hierarchy diagrams in Draw.io mxGraph XML. It covers central topic design, branch shapes at multiple levels, curved organic connectors, color coding strategies, and the differences between mind maps and concept maps.

## Critical Rules (Memorize These)

1. **ALWAYS use curved connectors** — Set `curved=1` on every branch edge. NEVER use `edgeStyle=orthogonalEdgeStyle`.
2. **ALWAYS use `endArrow=none`** on mind map connectors. Mind map branches are NOT directional.
3. **ALWAYS center the root topic** and spread branches radially (top, bottom, left, right).
4. **ALWAYS color each branch family consistently** — All children of a branch share the parent branch's color family.
5. **NEVER use orthogonal (right-angle) connectors** in mind maps — they destroy the organic visual style.
6. **NEVER use directed arrows** (`endArrow=classic`) on mind map branches.
7. **ALWAYS include `whiteSpace=wrap;html=1;`** in every shape style.
8. **ALWAYS use `relative="1"`** on every edge ``.

## Mind Map Anatomy

A mind map has three levels of visual hierarchy:

```
Level 0: Central Topic  — large ellipse or rounded rectangle, bold text, dark fill
Level 1: Main Branches  — medium rounded rectangles, bold text, colored fill
Level 2: Sub-Branches   — small rounded rectangles, normal text, lighter fill
Level 3+: Leaf Nodes    — smallest rounded rectangles, normal text, lightest fill or white
```

### Decision Tree: Mind Map vs Concept Map

```
Does the diagram have ONE central topic radiating outward?
  YES --> Mind Map
    Are branches hierarchical (parent-child only)?
      YES --> Classic Mind Map (no cross-links)
      NO  --> Mind Map with cross-references
  NO  --> Does it show labeled relationships between concepts?
    YES --> Concept Map (uses labeled arrows between nodes)
    NO  --> Use a different diagram type (flowchart, org chart)
```

**Key difference:** Mind maps use `endArrow=none` (unlabeled branches). Concept maps use `endArrow=classic` with labeled edges describing the relationship.

## Central Topic (Level 0)

The central topic is the root node. It MUST be the largest and most prominent shape.

### Ellipse Style (Recommended)

```xml

  

```

### Rounded Rectangle Style (Alternative)

```xml

  

```

### Central Topic Properties

| Property | Value | Reason |
|----------|-------|--------|
| Width | 160–200 px | Largest shape in the diagram |
| Height | 70–100 px | Proportional to width |
| fontSize | 14–18 | Largest text in the diagram |
| fontStyle | 1 (bold) | Emphasis on the central topic |
| fillColor | Dark saturated color | Visual anchor point |
| fontColor | `#ffffff` | Contrast against dark fill |

## Main Branches (Level 1)

Main branches connect directly to the central topic. Each represents a major category.

```xml

  

```

### Main Branch Properties

| Property | Value | Reason |
|----------|-------|--------|
| Width | 110–140 px | Smaller than central topic |
| Height | 35–50 px | Compact but readable |
| fontSize | 12–14 | Smaller than central topic |
| fontStyle | 1 (bold) | Distinguishes from sub-branches |
| fillColor | Medium saturation | Each branch uses a distinct color |

## Sub-Branches (Level 2)

Sub-branches connect to main branches. They are smaller and use lighter fills.

```xml

  

```

### Sub-Branch Properties

| Property | Value | Reason |
|----------|-------|--------|
| Width | 80–110 px | Smaller than main branches |
| Height | 28–35 px | Compact |
| fontSize | 10–12 | Smaller than main branches |
| fontStyle | 0 (normal) | Less emphasis |
| fillColor | Light tint of parent branch color, or `#f5f5f5` | Visual hierarchy |

## Curved Connectors (Branch Lines)

Mind map connectors MUST use curved lines without arrowheads.

### Central-to-Branch Connector (Level 0 to Level 1)

```xml

  

```

### Branch-to-Sub-Branch Connector (Level 1 to Level 2)

```xml

  

```

### Connector Style Rules

| Level | strokeWidth | strokeColor | Reason |
|-------|-------------|-------------|--------|
| 0 to 1 | 2–3 | Match branch fillColor or strokeColor | Thick main branches |
| 1 to 2 | 1–2 | `#999999` or lighter branch color | Thinner sub-branches |
| 2 to 3+ | 1 | `#BBBBBB` or `#CCCCCC` | Thinnest leaf connections |

### Required Connector Properties

| Property | Value | NEVER Use |
|----------|-------|-----------|
| `endArrow` | `none` | `classic`, `block`, `open` |
| `startArrow` | *(omit)* | Any arrow type |
| `curved` | `1` | `0` or omitting it |
| `edge` | `"1"` | *(NEVER omit)* |
| `relative` | `"1"` | *(NEVER omit on geometry)* |

## Color Coding Strategy

### Recommended Branch Color Families

| Branch | fillColor | strokeColor | Hex Family |
|--------|-----------|-------------|------------|
| Branch 1 (Blue) | `#dae8fc` | `#6c8ebf` | Blue |
| Branch 2 (Green) | `#d5e8d4` | `#82b366` | Green |
| Branch 3 (Yellow) | `#fff2cc` | `#d6b656` | Yellow |
| Branch 4 (Purple) | `#e1d5e7` | `#9673a6` | Purple |
| Branch 5 (Orange) | `#f8cecc` | `#b85450` | Red/Orange |
| Branch 6 (Teal) | `#d4e1f5` | `#4a86c8` | Teal |

### Color Hierarchy Rule

```
Central Topic:  DARKEST color      (fillColor=#1168bd, fontColor=#ffffff)
Main Branch:    MEDIUM saturation   (fillColor=#dae8fc, strokeColor=#6c8ebf)
Sub-Branch:     LIGHT tint          (fillColor=#f5f5f5, strokeColor=#666666)
Leaf Node:      LIGHTEST or white   (fillColor=#ffffff, strokeColor=#999999)
```

## Radial Layout Pattern

### Branch Positioning Strategy

Position main branches around the central topic. ALWAYS distribute branches to avoid overlap.

```
                    [Branch Top-Left]     [Branch Top-Right]
                           \                /
                            \              /
           [Branch Left] --- [CENTRAL] --- [Branch Right]
                            /              \
                           /                \
                 [Branch Bottom-Left]  [Branch Bottom-Right]
```

### Position Reference (Central Topic at 380,250, size 180x90)

| Branch Position | X | Y | Direction from Center |
|----------------|-----|-----|----------------------|
| Top-left | 80 | 60 | Upper-left quadrant |
| Top-right | 600 | 60 | Upper-right quadrant |
| Left | 30 | 240 | Directly left |
| Right | 650 | 240 | Directly right |
| Bottom-left | 80 | 440 | Lower-left quadrant |
| Bottom-right | 600 | 440 | Lower-right quadrant |

### Sub-Branch Positioning

Place sub-branches further out from the center, clustered near their parent branch:

- Sub-branches of a top-left branch go ABOVE and to the LEFT of the parent.
- Sub-branches of a bottom-right branch go BELOW and to the RIGHT of the parent.
- ALWAYS maintain at least 20px vertical spacing between sibling sub-branches.

## Complete Mind Map XML Example

A 3-level mind map with central topic, 3 main branches, and sub-branches.

```xml

  
    
    

    
    
      
    

    
    
      
    
    
      
    
    
      
    

    
    
      
    
    
      
    
    
      
    

    
    
      
    
    
      
    
    
      
    
    
      
    

    
    
      
    
    
      
    
    
      
    

    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
  

```

## Concept Map Variant

Concept maps differ from mind maps: they use **labeled, directed edges** and allow **cross-links** between any nodes.

### Concept Map Connector Style

```xml

  

```

### Mind Map vs Concept Map Summary

| Property | Mind Map | Concept Map |
|----------|----------|-------------|
| `endArrow` | `none` | `classic` |
| Edge labels | NEVER | ALWAYS (relationship name) |
| Cross-links | Rare | Common |
| Structure | Strict hierarchy | Network/graph |
| Central topic | ALWAYS one | Optional |

## Draw.io Tree Layout Integration

Draw.io provides automatic mind map layout. After placing nodes and edges manually, apply the layout:

**Menu path:** Edit > Layout > Tree > Mindmap

This auto-arranges nodes radially. The XML remains unchanged; Draw.io recalculates `` positions.

### Tree Layout Plugin Properties

When using the `mxCompactTreeLayout` programmatically:

| Property | Mind Map Value | Description |
|----------|---------------|-------------|
| `horizontal` | `false` | Radial spread (not left-to-right) |
| `levelDistance` | `60` | Gap between hierarchy levels |
| `nodeDistance` | `20` | Gap between sibling nodes |
| `edgeRouting` | `curved` | ALWAYS use curved for mind maps |

## Reference Links

- [Complete Reference](references/methods.md)
- [Working Examples](references/examples.md)
- [Anti-Patterns](references/anti-patterns.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Impertio-Studio](https://github.com/Impertio-Studio)
- **Source:** [Impertio-Studio/Draw.io-Claude-Skill-Package](https://github.com/Impertio-Studio/Draw.io-Claude-Skill-Package)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-impertio-studio-draw-io-claude-skill-package-drawio-impl-mindmaps
- Seller: https://agentstack.voostack.com/s/impertio-studio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.