draw.io

https://www.drawio.com/doc
Admin
draw.io is a free, open-source diagram editor for creating flowcharts, UML diagrams, organizational...
Tokens:202,444
Snippets:3,298
Trust Score:9.6
Update:1 month ago
Show doc for...
Tokens:
Raw
### Configure Color Schemes

Source: https://www.drawio.com/docs/reference/configure-diagram-editor

Example of defining border styles for color schemes.

```json
"2px solid"
```

```json
"3px dashed"
```

--------------------------------

### Configure Mermaid Diagrams

Source: https://www.drawio.com/docs/reference/configure-diagram-editor

Example of enforcing a consistent theme for Mermaid diagrams.

```json
{"theme": "neutral", "themeVariables": {"primaryColor": "#dae8fc"}}
```

--------------------------------

### CSV Import Configuration Example

Source: https://www.drawio.com/docs/manual/insert/insert-from-csv

A configuration script for generating an organizational chart with custom styles, connectors, and data mapping.

```text
# label: %name%<br /><i style="color:gray;">%position%</i><br /><a href="mailto:%email%">Email</a>  
#  
# style: label;image=%image%;whiteSpace=wrap;html=1;rounded=1; fillColor=%fill%;strokeColor=%stroke%;  
# parentstyle: swimlane;whiteSpace=wrap;html=1;childLayout=stackLayout;horizontal=1;horizontalStack=0;resizeParent=1;resizeLast=0;collapsible=1;  
#  
# namespace: csvimport-  
#  
# connect: {"from": "manager", "to": "name", "invert": true, "label": "manages", "style": "curved=1;endArrow=blockThin;endFill=1;fontSize=11;"}  
# connect: {"from": "refs", "to": "id", "style": "curved=1;fontSize=11;"}  
#  
## Node width and height, and padding for autosize  
# width: auto  
# height: auto  
# padding: -12  
#  
# ignore: id,image,fill,stroke,refs,manager  
#  
## Column to be renamed to link attribute (used as link).  
# link: url  
#  
## Spacing between nodes, heirarchical levels and parallel connections.  
# nodespacing: 40  
# levelspacing: 100  
# edgespacing: 40  
#  
# layout: auto  
#  
## ---- CSV below this line. First line are column names. ----  
name,position,id,location,manager,email,fill,stroke,refs,url,image  
Tessa Miller,CFO,emi,Office 1,,me@example.com,#dae8fc,#6c8ebf,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-3-128.png  
Edward Morrison,Brand Manager,emo,Office 2,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-10-3-128.png  
Alison Donovan,System Admin,rdo,Office 3,Tessa Miller,me@example.com,#d5e8d4,#82b366,"emo,tva",https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-2-128.png  
Evan Valet,HR Director,tva,Office 4,Tessa Miller,me@example.com,#d5e8d4,#82b366,,https://www.draw.io,https://cdn3.iconfinder.com/data/icons/user-avatars-1/512/users-9-2-128.png
```

--------------------------------

### Customize Editor via URL Parameters

Source: https://www.drawio.com/docs/reference/supported-url-parameters

Example of combining multiple parameters to set language, theme, and UI visibility.

```text
https://app.diagrams.net/?lang=de&ui=sketch&format=0
```

--------------------------------

### Configure Custom Fonts

Source: https://www.drawio.com/docs/reference/configure-diagram-editor

Examples for defining custom font arrays and CSS font-face rules.

```json
["Helvetica", {"fontFamily": "Rock Salt", "fontUrl": "https://fonts.googleapis.com/css?family=Rock+Salt"} ]
```

```json
{"fontCss": "@font-face { font-family: 'Marvel'; src: url(/confluence/download/attachments/720900/Marvel-Regular.ttf?api=v2) format('truetype')}"}
```

```json
"fontCss": "@font-face { font-family: 'Waltograph'; src: url(https://fontlibrary.org/assets/fonts/waltograph/23a40698cd1bb84f930b7a0884c134a6/ab260a56f2b852b78f81eac337e0a2fc/WaltographRegular.otf) format('opentype')}" and "customFonts": ["Waltograph"]
```

--------------------------------

### Configure Color Names

Source: https://www.drawio.com/docs/reference/configure-diagram-editor

Example of mapping color codes to display names for tooltips.

```json
{"FFFFFF": "White", "000000": "Black"}
```

--------------------------------

### Network Diagram with Groups Example

Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference

Creates a network diagram featuring groups (swimlanes) for different network segments like DMZ and Internal Network. This example demonstrates placing elements like firewalls and servers within these groups and connecting them.

```xml
<mxfile>
  <diagram id="network" name="Network">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- DMZ Group -->
        <mxCell id="dmz" value="DMZ" style="swimlane;startSize=25;fillColor=#F5F5F5;strokeColor=#666666;fontStyle=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="50" y="50" width="300" height="200" as="geometry" />
        </mxCell>

        <!-- Firewall inside DMZ -->
        <mxCell id="fw" value="Firewall" style="shape=mxgraph.cisco.firewalls.firewall;sketch=0;html=1;whiteSpace=wrap;" vertex="1" parent="dmz">
          <mxGeometry x="100" y="60" width="80" height="60" as="geometry" />
        </mxCell>

        <!-- Internal Group -->
        <mxCell id="internal" value="Internal Network" style="swimlane;startSize=25;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontStyle=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="450" y="50" width="300" height="200" as="geometry" />
        </mxCell>

        <!-- Server -->
        <mxCell id="srv" value="App Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;" vertex="1" parent="internal">
          <mxGeometry x="90" y="60" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Connection -->
        <mxCell id="conn" style="endArrow=classic;startArrow=classic;html=1;strokeWidth=2;" edge="1" parent="1" source="fw" target="srv">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

--------------------------------

### Configure mxParallelEdgeLayout

Source: https://www.drawio.com/docs/reference/json-layout-specification

Example JSON configuration for the mxParallelEdgeLayout to manage spacing between overlapping connectors.

```json
{
  "layout": "mxParallelEdgeLayout",
  "config": { "spacing": 20, "checkOverlap": true }
}
```

--------------------------------

### Configure Editor via Parent Window

Source: https://www.drawio.com/docs/reference/embed-mode

Example of the JSON message sent from the parent window to the editor to apply custom configurations.

```json
{"action": "configure", "config": {"defaultFonts": ["Humor Sans"]}}
```

--------------------------------

### Configure mxOrgChartLayout

Source: https://www.drawio.com/docs/reference/json-layout-specification

Example JSON configuration for the mxOrgChartLayout, including branch style and spacing parameters.

```json
{
  "layout": "mxOrgChartLayout",
  "config": {
    "branchOptimizer": 2,
    "parentChildSpacing": 20,
    "siblingSpacing": 20
  }
}
```

--------------------------------

### Show Template Dialog

Source: https://www.drawio.com/docs/reference/embed-mode

Displays the template selection dialog. Use the second example to prevent the editor from exiting when the user cancels the dialog.

```json
{"action": "template"}
```

```json
{"action": "template", "noExitOnCancel": true}
```

--------------------------------

### Run Basic draw.io Docker Container

Source: https://www.drawio.com/docs/security/diagrams-docker-app

This command starts a basic draw.io Docker container, exposing the application on ports 8080 and 8443. It's suitable for initial setup and testing.

```bash
docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 jgraph/drawio
```

--------------------------------

### Example Dependency Graph from Gemfile

Source: https://www.drawio.com/docs/diagram-types/dependency-graphs

Visualizes three levels of dependencies from a Gemfile, as seen on GitHub. This helps understand build system dependencies.

```text
www.diagrams.net-source->jekyll
jekyll->addressable
jekyll->colorator
jekyll->em-websocket
...
```

--------------------------------

### Install MCP tool server

Source: https://www.drawio.com/docs/manual/generate/drawio-mcp-server

Use this command to install the draw.io MCP tool server via npm.

```bash
npx @drawio/mcp
```

--------------------------------

### Mermaid Mindmap Syntax Example

Source: https://www.drawio.com/docs/manual/mermaid/mindmap-from-text

A comprehensive example of a mindmap structure using various node shapes and hierarchical levels.

```mermaid
mindmap  
  root)HR(  
    ))Onboarding((  
      Prior to first day  
        Contract signed  
        Employee handbook  
        IT equipment reserved  
      First day  
        Office tour  
        Team intros  
        Account setup  
      First week  
        Shadow team members  
        Software training  
      First month  
        Assign projects/tasks  
        Set goals  
        Get team feedback  
  
    id2{ {Offboarding} }  
      [Feedback and review]  
      [Exit interview]  
      [Tasks/projects reassigned]  
        [Handover]  
      [Account deactivation/deletion]  
      [IT hardware return]  
```

--------------------------------

### UML Class Diagram Example

Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference

Defines a UML class diagram with abstract and concrete classes, including attributes and methods. This example shows how to represent inheritance relationships between classes.

```xml
<mxfile>
  <diagram id="uml" name="Classes">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Class: Animal -->
        <mxCell id="animal" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;i&gt;&amp;lt;&amp;lt;abstract&amp;gt;&amp;gt;&lt;/i&gt;&lt;br&gt;&lt;b&gt;Animal&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ name: String&lt;br&gt;+ age: int&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ speak(): void&lt;br&gt;+ move(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="300" y="40" width="200" height="140" as="geometry" />
        </mxCell>

        <!-- Class: Dog -->
        <mxCell id="dog" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;Dog&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ breed: String&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ fetch(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="180" y="260" width="160" height="120" as="geometry" />
        </mxCell>

        <!-- Class: Cat -->
        <mxCell id="cat" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;Cat&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ indoor: boolean&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ purr(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="460" y="260" width="160" height="120" as="geometry" />
        </mxCell>

        <!-- Inheritance: Dog extends Animal -->
        <mxCell id="e1" style="endArrow=block;endFill=0;html=1;" edge="1" parent="1" source="dog" target="animal">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- Inheritance: Cat extends Animal -->
        <mxCell id="e2" style="endArrow=block;endFill=0;html=1;" edge="1" parent="1" source="cat" target="animal">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

--------------------------------

### mxGraphModel adaptiveColors Attribute Example

Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference

Example of setting the 'adaptiveColors' attribute on the mxGraphModel element. This attribute controls color adaptation for light/dark mode viewing and is typically not set by AI generators.

```xml
<mxGraphModel dx="0" dy="0" grid="1" ... adaptiveColors="auto">
```

--------------------------------

### Simple Flowchart Diagram Example

Source: https://www.drawio.com/docs/reference/diagram-generation/style-reference

An example of a complete flowchart diagram defined using mxGraphModel. It includes various shapes like ellipses, rhombuses, and rounded rectangles, connected by styled edges with labels.

```xml
<mxfile>
  <diagram id="flowchart" name="Flowchart">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Start -->
        <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;" vertex="1" parent="1">
          <mxGeometry x="340" y="40" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Decision -->
        <mxCell id="decision" value="Condition?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#FFF2CC;strokeColor=#D6B656;" vertex="1" parent="1">
          <mxGeometry x="320" y="150" width="160" height="80" as="geometry" />
        </mxCell>

        <!-- Process A -->
        <mxCell id="procA" value="Process A" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DAE8FC;strokeColor=#6C8EBF;" vertex="1" parent="1">
          <mxGeometry x="160" y="290" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Process B -->
        <mxCell id="procB" value="Process B" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DAE8FC;strokeColor=#6C8EBF;" vertex="1" parent="1">
          <mxGeometry x="520" y="290" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- End -->
        <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#F8CECC;strokeColor=#B85450;" vertex="1" parent="1">
          <mxGeometry x="340" y="420" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Edges -->
        <mxCell id="e1" style="endArrow=classic;html=1;" edge="1" parent="1" source="start" target="decision">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e2" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="procA">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e3" value="No" style="endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="procB">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e4" style="endArrow=classic;html=1;" edge="1" parent="1" source="procA" target="end">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e5" style="endArrow=classic;html=1;" edge="1" parent="1" source="procB" target="end">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```

--------------------------------

### Initialization Event

Source: https://www.drawio.com/docs/reference/embed-mode

The editor sends this event upon successful initialization to signal readiness for a load action.

```json
{event: 'init'}
```

--------------------------------

### Example Shape Style Definition

Source: https://www.drawio.com/docs/reference/shortcuts/shortcut-styles

This is an example of how a shape's style is represented as key/value pairs, separated by semicolons. It demonstrates various styling properties like stroke width, fill color, and arrow types.

```text
endArrow=classic;dashed=1;html=1;
strokeWidth=3;fillColor=#f8cecc;strokeColor=#b85450;
startArrow=circlePlus;startFill=0;endFill=0;
```

--------------------------------

### Open diagram via URL hash

Source: https://www.drawio.com/docs/reference/diagram-generation

Use the #create parameter with a compressed JSON object to open diagrams directly in the editor.

```text
https://app.diagrams.net/?grid=0&pv=0#create=ENCODED_JSON
```

--------------------------------

### Define Enabled Libraries

Source: https://www.drawio.com/docs/reference/configure-diagram-editor

Example of restricting available libraries in the More Shapes dialog.

```json
["general", "uml"]
```

--------------------------------

### Initialization Event

Source: https://www.drawio.com/docs/reference/embed-mode

Describes the initial handshake process where the editor signals readiness and expects a load action.

```APIDOC
## Initialization Event

### Description
When the editor is ready, it sends an 'init' event to the host application. The host application is expected to respond with a load action.

### Event
{ "event": "init" }

### Expected Response
A load action sent via postMessage.
```
Tokens:
Raw