/draw-io-diagram-generator

draw.io Shape Libraries

Reference guide for all built-in shape libraries. Enable via View > Shapes in the draw.io editor (or VS Code extension shape panel).

Library Catalog

General

Enable: Always active by default

Common shapes for any diagram type.

Flowchart

Enable: View > Shapes > Flowchart
Shape prefix: mxgraph.flowchart.

Standard ANSI/ISO flowchart symbols.

Complete flowchart example style strings:

Process:          rounded=1;whiteSpace=wrap;html=1;
Decision:         rhombus;whiteSpace=wrap;html=1;
Start/End:        ellipse;whiteSpace=wrap;html=1;
Database:         shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;
Document:         shape=mxgraph.flowchart.document;whiteSpace=wrap;html=1;
I/O (Data):       shape=mxgraph.flowchart.io;whiteSpace=wrap;html=1;

UML

Enable: View > Shapes > UML

Use Case Diagrams

Class Diagrams

Use swimlane containers for class boxes:

<!-- Class container -->
<mxCell value="«interface»&#xa;IOrderService" 
        style="swimlane;fontStyle=1;align=center;startSize=30;whiteSpace=wrap;html=1;"
        vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="200" height="160" as="geometry" />
</mxCell>

<!-- Attributes (child of class) -->
<mxCell value="+ id: string&#xa;+ status: string" 
        style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;overflow=hidden;html=1;"
        vertex="1" parent="classId">
  <mxGeometry y="30" width="200" height="60" as="geometry" />
</mxCell>

<!-- Method separator line -->
<mxCell value="" style="line;strokeWidth=1;fillColor=none;" vertex="1" parent="classId">
  <mxGeometry y="90" width="200" height="10" as="geometry" />
</mxCell>

<!-- Methods (child of class) -->
<mxCell value="+ create(): Order&#xa;+ cancel(): void"
        style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;overflow=hidden;html=1;"
        vertex="1" parent="classId">
  <mxGeometry y="100" width="200" height="60" as="geometry" />
</mxCell>

UML Relationship Arrows

Component Diagram

Sequence Diagrams

State Diagrams

Entity Relationship (ER Diagrams)

Enable: View > Shapes > Entity Relation

Modern ER Tables (crow's foot notation)

<!-- Table container -->
<mxCell id="tbl-orders" value="orders"
        style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;"
        vertex="1" parent="1">
  <mxGeometry x="80" y="80" width="240" height="210" as="geometry" />
</mxCell>

<!-- Column row -->
<mxCell id="col-id" value=""
        style="shape=tableRow;horizontal=0;startSize=0;swimmilaneHead=0;swimlaneBody=0;fillColor=none;collapsible=0;dropTarget=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;"
        vertex="1" parent="tbl-orders">
  <mxGeometry y="30" width="240" height="30" as="geometry" />
</mxCell>

<!-- PK marker cell -->
<mxCell value="PK" style="shape=partialRectangle;connectable=0;fillColor=none;top=0;left=0;bottom=0;right=0;fontStyle=1;overflow=hidden;"
        vertex="1" parent="col-id">
  <mxGeometry width="40" height="30" as="geometry" />
</mxCell>

<!-- Column name cell -->
<mxCell value="id" style="shape=partialRectangle;connectable=0;fillColor=none;top=0;left=0;bottom=0;right=0;overflow=hidden;"
        vertex="1" parent="col-id">
  <mxGeometry x="40" width="140" height="30" as="geometry" />
</mxCell>

<!-- Data type cell -->
<mxCell value="UUID" style="shape=partialRectangle;connectable=0;fillColor=none;top=0;left=0;bottom=0;right=0;overflow=hidden;fontStyle=2;"
        vertex="1" parent="col-id">
  <mxGeometry x="180" width="60" height="30" as="geometry" />
</mxCell>

ER Relationship Connectors (crow's foot)

Network / Infrastructure

Enable: View > Shapes > Networking

BPMN 2.0

Enable: View > Shapes > BPMN
Shape prefix: shape=mxgraph.bpmn.*

Mockup / Wireframe

Enable: View > Shapes > Mockup

Kubernetes

Enable: View > Shapes > Kubernetes

Enabling Libraries in VS Code

Libraries are enabled inside the draw.io editor (which VS Code embeds):

1. Open any .drawio or .drawio.svg file in VS Code
2. Click the + icon in the shape panel (left sidebar) →Search Shapes or More Shapes
3. Check the library you want to activate
4. Shapes appear in the panel for drag-and-drop

Libraries are stored per-user in draw.io settings (not per-project).

Custom Shape Library Creation

A custom library is an XML file with .xml extension loaded via File > Open Library:

<mxlibrary>
  [
    {
      "xml": "&lt;mxCell value=\"Component\" style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;\" vertex=\"1\"&gt;&lt;mxGeometry width=\"120\" height=\"60\" as=\"geometry\" /&gt;&lt;/mxCell&gt;",
      "w": 120,
      "h": 60,
      "aspect": "fixed",
      "title": "My Component"
    }
  ]
</mxlibrary>

Each shape entry contains:

• xml: XML-escaped cell definition

• w / h: Default width/height

• aspect: "fixed" to lock ratio

• title: Name shown in panel

  } ]

  </mxlibrary>