Drawio Impl Mindmaps

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 <mxGeometry>.

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)

<mxCell id="center" value="Central Topic"
        style="ellipse;whiteSpace=wrap;html=1;fillColor=#1168bd;fontColor=#ffffff;strokeColor=#0b4884;fontSize=16;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="300" y="250" width="180" height="90" as="geometry" />
</mxCell>

Rounded Rectangle Style (Alternative)

<mxCell id="center" value="Central Topic"
        style="rounded=1;whiteSpace=wrap;html=1;arcSize=40;fillColor=#1168bd;fontColor=#ffffff;strokeColor=#0b4884;fontSize=16;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="300" y="250" width="180" height="80" as="geometry" />
</mxCell>

Central Topic Properties

Main Branches (Level 1)

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

<mxCell id="b1" value="Branch One"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=13;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="80" y="100" width="130" height="45" as="geometry" />
</mxCell>

Main Branch Properties

Sub-Branches (Level 2)

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

<mxCell id="b1_1" value="Sub-topic A"
        style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=11;"
        vertex="1" parent="1">
  <mxGeometry x="10" y="160" width="100" height="30" as="geometry" />
</mxCell>

Sub-Branch Properties

Curved Connectors (Branch Lines)

Mind map connectors MUST use curved lines without arrowheads.

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

<mxCell id="e_center_b1"
        style="endArrow=none;html=1;curved=1;strokeWidth=2;strokeColor=#6c8ebf;"
        edge="1" source="center" target="b1" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

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

<mxCell id="e_b1_b1_1"
        style="endArrow=none;html=1;curved=1;strokeWidth=1;strokeColor=#999999;"
        edge="1" source="b1" target="b1_1" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Connector Style Rules

Required Connector Properties

Color Coding Strategy

Recommended Branch Color Families

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)

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.

<mxGraphModel>
  <root>
    <mxCell id="0" />
    <mxCell id="1" parent="0" />

    <!-- Central Topic -->
    <mxCell id="center" value="Project Plan"
            style="ellipse;whiteSpace=wrap;html=1;fillColor=#1168bd;fontColor=#ffffff;strokeColor=#0b4884;fontSize=16;fontStyle=1;"
            vertex="1" parent="1">
      <mxGeometry x="300" y="200" width="160" height="80" as="geometry" />
    </mxCell>

    <!-- Branch 1: Design (Blue, top-left) -->
    <mxCell id="b1" value="Design"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=13;fontStyle=1;"
            vertex="1" parent="1">
      <mxGeometry x="80" y="60" width="120" height="40" as="geometry" />
    </mxCell>
    <mxCell id="b1_1" value="Wireframes"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="10" y="120" width="100" height="30" as="geometry" />
    </mxCell>
    <mxCell id="b1_2" value="Mockups"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="130" y="120" width="100" height="30" as="geometry" />
    </mxCell>

    <!-- Branch 2: Development (Green, top-right) -->
    <mxCell id="b2" value="Development"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=13;fontStyle=1;"
            vertex="1" parent="1">
      <mxGeometry x="540" y="60" width="120" height="40" as="geometry" />
    </mxCell>
    <mxCell id="b2_1" value="Frontend"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="510" y="120" width="100" height="30" as="geometry" />
    </mxCell>
    <mxCell id="b2_2" value="Backend"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="630" y="120" width="100" height="30" as="geometry" />
    </mxCell>

    <!-- Branch 3: Testing (Yellow, bottom-center) -->
    <mxCell id="b3" value="Testing"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=13;fontStyle=1;"
            vertex="1" parent="1">
      <mxGeometry x="320" y="360" width="120" height="40" as="geometry" />
    </mxCell>
    <mxCell id="b3_1" value="Unit Tests"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="240" y="420" width="100" height="30" as="geometry" />
    </mxCell>
    <mxCell id="b3_2" value="Integration"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="360" y="420" width="100" height="30" as="geometry" />
    </mxCell>
    <mxCell id="b3_3" value="E2E Tests"
            style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
            vertex="1" parent="1">
      <mxGeometry x="480" y="420" width="100" height="30" as="geometry" />
    </mxCell>

    <!-- Connectors: Center to Main Branches (thick, colored, curved) -->
    <mxCell id="ec1" style="endArrow=none;html=1;curved=1;strokeWidth=2;strokeColor=#6c8ebf;"
            edge="1" source="center" target="b1" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec2" style="endArrow=none;html=1;curved=1;strokeWidth=2;strokeColor=#82b366;"
            edge="1" source="center" target="b2" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec3" style="endArrow=none;html=1;curved=1;strokeWidth=2;strokeColor=#d6b656;"
            edge="1" source="center" target="b3" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>

    <!-- Connectors: Main Branches to Sub-Branches (thin, gray, curved) -->
    <mxCell id="ec1a" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b1" target="b1_1" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec1b" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b1" target="b1_2" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec2a" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b2" target="b2_1" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec2b" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b2" target="b2_2" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec3a" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b3" target="b3_1" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec3b" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b3" target="b3_2" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
    <mxCell id="ec3c" style="endArrow=none;html=1;curved=1;strokeColor=#999999;"
            edge="1" source="b3" target="b3_3" parent="1">
      <mxGeometry relative="1" as="geometry" />
    </mxCell>
  </root>
</mxGraphModel>

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

<mxCell id="cm_e1" value="requires"
        style="endArrow=classic;html=1;curved=1;strokeColor=#666666;fontSize=10;fontColor=#666666;"
        edge="1" source="concept_a" target="concept_b" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Mind Map vs Concept Map Summary

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 <mxGeometry> positions.

Tree Layout Plugin Properties

When using the mxCompactTreeLayout programmatically:

Reference Links

• Complete Reference
• Working Examples
• Anti-Patterns