Diagram Types Reference

Diagram Types Reference

Quick Selection Guide

Need	Diagram Type	Complexity
Show a process/workflow	Flowchart	Low
Model classes and relationships	UML Class	Medium
Show message flows over time	UML Sequence	Medium
Model object lifecycle	UML State	Medium
Show parallel/concurrent flows	UML Activity	Medium
Show system modules	UML Component	Medium
Show infrastructure layout	UML Deployment	Medium
Show user interactions	UML Use Case	Low
Describe architecture at scale	C4 Model	Low-High
Model business processes	BPMN 2.0	High
Design database schema	ER Diagram	Medium
Map network topology	Network Diagram	Medium
Document cloud infrastructure	Cloud Architecture	Medium
Show Kubernetes resources	Kubernetes Diagram	Medium
Brainstorm ideas	Mindmap	Low
Show reporting structure	Org Chart	Low
Plan project timeline	Gantt Chart	Medium
Show cross-team processes	Swimlane	Medium
Analyze security threats	Threat Model	High

---

Flowcharts

When to Use

Process documentation, decision logic, algorithms, onboarding guides, troubleshooting trees.

Shapes and Notation

Shape	Style	Meaning
Rounded rectangle	rounded=1;whiteSpace=wrap;html=1;	Process / action step
Diamond	rhombus;	Decision (Yes/No branching)
Oval / stadium	ellipse;	Terminator (start/end)
Parallelogram	shape=parallelogram;perimeter=parallelogramPerimeter;	Input/Output
Rectangle	(default)	Generic step
Cylinder	shape=cylinder3;	Database / data store
Document	shape=document;	Document / report
Predefined process	shape=process;	Subroutine / predefined process

Swimlane Variant

Horizontal or vertical lanes partition a flowchart by role or department:

<mxCell id="lane1" value="Frontend" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="300" height="400" as="geometry"/>
</mxCell>
<mxCell id="lane2" value="Backend" style="swimlane;startSize=30;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="300" y="0" width="300" height="400" as="geometry"/>
</mxCell>

Minimal XML Example

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="start" value="Start" style="ellipse;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="160" y="20" width="80" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="step1" value="Process Request" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="130" y="100" width="140" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="dec1" value="Approved?" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="150" y="200" width="100" height="80" as="geometry"/>
    </mxCell>
    <mxCell id="end" value="End" style="ellipse;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
      <mxGeometry x="160" y="330" width="80" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="start" target="step1" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="step1" target="dec1" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="e3" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="dec1" target="end" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

---

UML Class Diagrams

When to Use

Object-oriented design, domain modeling, API contracts, data model documentation.

Notation

Element	Representation
Class	Rectangle with 3 compartments: name, attributes, methods
Abstract class	Name in italics
Interface	<<interface>> stereotype
Visibility	+ public, - private, # protected, ~ package
Static member	Underlined

Relationship Types

Relationship	Arrow Style	draw.io Style
Inheritance (extends)	Solid line, hollow triangle	endArrow=block;endFill=0;
Interface (implements)	Dashed line, hollow triangle	endArrow=block;endFill=0;dashed=1;
Association	Solid line, open arrow	endArrow=open;endFill=0;
Directed association	Solid line, filled arrow	endArrow=open;endFill=1;
Aggregation	Solid line, hollow diamond at parent	startArrow=diamond;startFill=0;endArrow=none;
Composition	Solid line, filled diamond at parent	startArrow=diamond;startFill=1;endArrow=none;
Dependency	Dashed line, open arrow	dashed=1;endArrow=open;endFill=0;

Multiplicity Labels

Place as edge labels: 0..1, 1, 0..*, 1..*, *

draw.io Class Shape

<mxCell id="cls1" value="&lt;p style='margin:0;padding:4px;font-weight:bold;border-bottom:1px solid #666;'&gt;User&lt;/p&gt;&lt;p style='margin:0;padding:4px;text-align:left;border-bottom:1px solid #ccc;'&gt;- id: Long&lt;br/&gt;- name: String&lt;br/&gt;- email: String&lt;/p&gt;&lt;p style='margin:0;padding:4px;text-align:left;'&gt;+ getName(): String&lt;br/&gt;+ setEmail(e: String)&lt;/p&gt;"
  style="verticalAlign=top;align=center;overflow=fill;html=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="200" height="150" as="geometry"/>
</mxCell>

---

UML Sequence Diagrams

When to Use

API call flows, authentication sequences, microservice communication, protocol documentation.

Notation

Element	Style
Lifeline	shape=umlLifeline;perimeter=lifelinePerimeter;container=1;collapsible=0;recursiveResize=0;size=40;
Activation box	Narrow filled rectangle on lifeline
Sync message	Solid line, filled arrowhead: endArrow=block;endFill=1;
Async message	Solid line, open arrowhead: endArrow=async;endFill=0; or endArrow=open;endFill=0;
Return message	Dashed line, open arrowhead: dashed=1;endArrow=open;endFill=0;
Self-call	Loop back to same lifeline
Create message	Dashed line to new lifeline: dashed=1;endArrow=open;endFill=1;
Destroy	X marker: shape=umlDestroy;

Combined Fragments

Fragment	Meaning	Style
alt	Alternative (if/else)	shape=umlFrame; with label alt
opt	Optional (if without else)	shape=umlFrame; with label opt
loop	Loop/iteration	shape=umlFrame; with label loop
par	Parallel execution	shape=umlFrame; with label par
break	Break from enclosing fragment	shape=umlFrame; with label break
critical	Critical region	shape=umlFrame; with label critical

Minimal Example

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="client" value=":Client" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;size=40;" vertex="1" parent="1">
      <mxGeometry x="80" y="20" width="100" height="300" as="geometry"/>
    </mxCell>
    <mxCell id="server" value=":Server" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;size=40;" vertex="1" parent="1">
      <mxGeometry x="280" y="20" width="100" height="300" as="geometry"/>
    </mxCell>
    <mxCell id="msg1" value="request()" style="endArrow=block;endFill=1;" edge="1" parent="1">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="130" y="90" as="sourcePoint"/>
        <mxPoint x="325" y="90" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="msg2" value="response" style="endArrow=open;endFill=0;dashed=1;" edge="1" parent="1">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="325" y="150" as="sourcePoint"/>
        <mxPoint x="130" y="150" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

---

UML State Diagrams

When to Use

Object lifecycle modeling, protocol states, UI navigation flows, workflow status tracking.

Notation

Element	Style
State	rounded=1;whiteSpace=wrap;html=1;arcSize=20;
Initial state	ellipse;fillColor=#000000;strokeColor=#000000; (small black circle)
Final state	shape=doubleCircle;fillColor=#000000;strokeColor=#000000;
Transition	Edge with label event [guard] / action
Composite state	Container with nested states
Fork/join bar	shape=line;strokeWidth=4;fillColor=#000000;
Choice	rhombus;fillColor=#000000;fontSize=0; (small diamond)
History	Circle with H: ellipse; with label H

Example

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="init" value="" style="ellipse;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
      <mxGeometry x="200" y="20" width="20" height="20" as="geometry"/>
    </mxCell>
    <mxCell id="idle" value="Idle" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
      <mxGeometry x="160" y="80" width="100" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="active" value="Active" style="rounded=1;whiteSpace=wrap;html=1;arcSize=20;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="160" y="200" width="100" height="50" as="geometry"/>
    </mxCell>
    <mxCell id="final" value="" style="shape=doubleCircle;fillColor=#000000;strokeColor=#000000;" vertex="1" parent="1">
      <mxGeometry x="195" y="320" width="30" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="t1" style="" edge="1" source="init" target="idle" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="t2" value="start()" style="" edge="1" source="idle" target="active" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="t3" value="stop()" style="" edge="1" source="active" target="final" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

---

UML Activity Diagrams

When to Use

Business process modeling, algorithm visualization, parallel workflow documentation, use case elaboration.

Notation

Element	Style
Action	rounded=1;whiteSpace=wrap;html=1;
Initial node	ellipse;fillColor=#000000; (small black circle)
Final node	shape=doubleCircle;fillColor=#000000;
Decision/Merge	rhombus;fillColor=#fff2cc;strokeColor=#d6b656;
Fork/Join	shape=line;strokeWidth=4;fillColor=#000000;direction=south; (horizontal bar)
Swimlane	swimlane;startSize=30;
Object node	shape=note;
Signal send	shape=offPageConnector;direction=east;
Signal receive	shape=offPageConnector;direction=west;

---

UML Component Diagrams

When to Use

System decomposition, module dependencies, service boundaries, package structure.

Notation

Element	Style
Component	shape=component;align=left;spacingLeft=36;
Interface (provided)	Small circle: ellipse;aspect=fixed; (size ~16x16)
Interface (required)	Half circle: shape=requiredInterface;
Port	Small square on component border
Dependency	dashed=1;endArrow=open;endFill=0;
Assembly	Socket + ball connection

---

UML Deployment Diagrams

When to Use

Infrastructure documentation, server topology, runtime environments, physical/virtual mapping.

Notation

Element	Style
Node (server/device)	shape=cube;whiteSpace=wrap;
Execution environment	shape=cube;fillColor=#dae8fc;
Artifact	shape=note;
Communication path	Solid line between nodes
Deployment specification	shape=note;dashed=1;

---

UML Use Case Diagrams

When to Use

Requirements capture, system boundary definition, actor identification, feature scoping.

Notation

Element	Style
Actor	shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;
Use case	ellipse;whiteSpace=wrap;html=1;
System boundary	swimlane;container=1;collapsible=0; (rectangle)
Association	Solid line: endArrow=none;
Include	dashed=1;endArrow=open; with label <<include>>
Extend	dashed=1;endArrow=open; with label <<extend>>
Generalization	endArrow=block;endFill=0;

---

C4 Model

When to Use

Progressive architecture documentation at four levels of abstraction. Recommended for system documentation.

Level 1: System Context

Shows the system and its relationships with users and external systems.

Element	Style	Color
Person	shape=mxgraph.c4.person2;	Blue #08427B
Software System	rounded=1;	Blue #1168BD (internal), Gray #999999 (external)
Relationship	endArrow=block;endFill=1;

Level 2: Container

Shows the high-level technology choices inside a system.

Element	Style	Color
Container (Web App)	rounded=1;	Blue #438DD5
Container (Database)	shape=cylinder3;	Blue #438DD5
Container (API)	rounded=1;	Blue #438DD5
System boundary	swimlane;container=1;dashed=1;

Level 3: Component

Shows the components within a container.

Element	Style	Color
Component	rounded=1;	Light blue #85BBF0

Level 4: Code

UML class diagrams for individual components. Use standard UML Class notation.

C4 Label Format

All C4 elements use a standard label format:

[Name]
[Technology]
Description

Minimal C4 Context Example

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="user" value="&lt;b&gt;Customer&lt;/b&gt;&lt;br&gt;[Person]&lt;br&gt;&lt;br&gt;Uses the system to manage orders" style="shape=mxgraph.c4.person2;whiteSpace=wrap;html=1;fontSize=11;fillColor=#08427B;fontColor=#ffffff;strokeColor=#073B6F;" vertex="1" parent="1">
      <mxGeometry x="180" y="20" width="140" height="140" as="geometry"/>
    </mxCell>
    <mxCell id="system" value="&lt;b&gt;Order System&lt;/b&gt;&lt;br&gt;[Software System]&lt;br&gt;&lt;br&gt;Manages customer orders and fulfillment" style="rounded=1;whiteSpace=wrap;html=1;fontSize=11;fillColor=#1168BD;fontColor=#ffffff;strokeColor=#0B4884;" vertex="1" parent="1">
      <mxGeometry x="150" y="230" width="200" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="ext" value="&lt;b&gt;Email System&lt;/b&gt;&lt;br&gt;[External System]&lt;br&gt;&lt;br&gt;Sends notification emails" style="rounded=1;whiteSpace=wrap;html=1;fontSize=11;fillColor=#999999;fontColor=#ffffff;strokeColor=#6C6C6C;" vertex="1" parent="1">
      <mxGeometry x="420" y="230" width="200" height="120" as="geometry"/>
    </mxCell>
    <mxCell id="r1" value="Places orders using" style="endArrow=block;endFill=1;html=1;fontSize=10;" edge="1" source="user" target="system" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="r2" value="Sends emails via" style="endArrow=block;endFill=1;html=1;fontSize=10;" edge="1" source="system" target="ext" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

---

BPMN 2.0

When to Use

Formal business process modeling, process automation, cross-organizational workflows, compliance documentation.

Events

Event	Start Style	Intermediate Style	End Style
None	shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.ellipsePerimeter;symbol=general;	(double border)	(thick border, filled)
Message	symbol=message;	symbol=message;isInterrupting=0;	symbol=message;
Timer	symbol=timer;	symbol=timer;	N/A
Error	N/A	N/A	symbol=error;
Escalation	N/A	symbol=escalation;	symbol=escalation;
Signal	symbol=signal;	symbol=signal;	symbol=signal;
Terminate	N/A	N/A	symbol=terminate;

Activities

Activity	Style
Task	shape=mxgraph.bpmn.task;taskMarker=abstract;
User Task	shape=mxgraph.bpmn.task;taskMarker=user;
Service Task	shape=mxgraph.bpmn.task;taskMarker=service;
Script Task	shape=mxgraph.bpmn.task;taskMarker=script;
Send Task	shape=mxgraph.bpmn.task;taskMarker=send;
Receive Task	shape=mxgraph.bpmn.task;taskMarker=receive;
Business Rule	shape=mxgraph.bpmn.task;taskMarker=businessRule;
Subprocess	shape=mxgraph.bpmn.task;taskMarker=abstract;isGroup=1;

Gateways

Gateway	Style	Meaning
Exclusive (XOR)	shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rhombusPerimeter;symbol=exclusiveGw;	One path taken
Parallel (AND)	symbol=parallelGw;	All paths taken
Inclusive (OR)	symbol=inclusiveGw;	One or more paths
Event-based	symbol=eventGw;	Wait for event
Complex	symbol=complexGw;	Custom condition

Flows

Flow	Style
Sequence flow	Solid line with filled arrow
Message flow	Dashed line with open arrow
Association	Dotted line, no arrow

Pools and Lanes

<mxCell id="pool1" value="Customer" style="shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rectanglePerimeter;swimlane;isGroup=1;horizontal=0;startSize=30;" vertex="1" parent="1">
  <mxGeometry x="50" y="50" width="800" height="200" as="geometry"/>
</mxCell>

---

ER Diagrams

When to Use

Database schema design, data modeling, relationship documentation.

Chen Notation

Element	Shape	Style
Entity	Rectangle	rounded=0;whiteSpace=wrap;html=1;
Weak entity	Double-bordered rectangle	rounded=0;strokeWidth=2;double=1;
Attribute	Ellipse	ellipse;
Key attribute	Underlined ellipse	ellipse;fontStyle=4;
Derived attribute	Dashed ellipse	ellipse;dashed=1;
Multi-valued	Double-bordered ellipse	ellipse;strokeWidth=2;double=1;
Relationship	Diamond	rhombus;

Crow's Foot Notation (recommended)

Use edge arrows for cardinality:

Cardinality	Start Arrow	End Arrow
One (mandatory)	ERmandOne
One (optional)	ERzeroToOne
Many (mandatory)	ERoneToMany
Many (optional)	ERzeroToMany

Style: edgeStyle=entityRelationEdgeStyle;endArrow=ERzeroToMany;startArrow=ERmandOne;endFill=0;startFill=0;

Table-Style Entity

<mxCell id="users" value="users" style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="180" height="120" as="geometry"/>
</mxCell>

---

Network Diagrams

When to Use

Network topology documentation, infrastructure planning, security zone mapping, troubleshooting.

Common Shapes

Device	Style
Router	shape=mxgraph.cisco.routers.router;
Switch	shape=mxgraph.cisco.switches.workgroup_switch;
Firewall	shape=mxgraph.cisco.firewalls.firewall;
Server	shape=mxgraph.cisco.servers.standard_server;
Workstation	shape=mxgraph.cisco.computers_and_peripherals.pc;
Cloud	shape=cloud;
Wireless AP	shape=mxgraph.cisco.wireless.access_point;
Load Balancer	shape=mxgraph.cisco.misc.load_balancer;

Conventions

• Use containers for network zones (DMZ, LAN, WAN)
• Color-code by security zone (red=untrusted, green=trusted, yellow=DMZ)
• Label connections with protocol/port info
• Show IP addresses as labels or metadata

---

Cloud Architecture Diagrams

When to Use

Cloud infrastructure documentation, solution architecture, cost estimation visuals, migration planning.

AWS Architecture

Service	Shape
EC2	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;
S3	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;
Lambda	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;
RDS	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;
DynamoDB	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.dynamodb;
VPC	shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.vpc;container=1;
Region	shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.region;container=1;dashed=1;
AZ	shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.availability_zone;container=1;
CloudFront	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront;
API Gateway	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.api_gateway;
SQS	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sqs;
SNS	shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sns;

AWS Group Colors:

• VPC: Green border #248814
• Region: Blue border #147EBA
• AZ: Blue border #147EBA (dashed)
• Public subnet: Green fill #E9F3E6
• Private subnet: Blue fill #E6F2F8

Azure Architecture

Service	Shape
App Service	shape=mxgraph.azure.app_service;
Azure Functions	shape=mxgraph.azure.azure_functions;
SQL Database	shape=mxgraph.azure.sql_database;
Blob Storage	shape=mxgraph.azure.storage_blob;
VM	shape=mxgraph.azure.virtual_machine;
AKS	shape=mxgraph.azure.kubernetes_services;
Azure AD	shape=mxgraph.azure.azure_active_directory;
Key Vault	shape=mxgraph.azure.key_vaults;

GCP Architecture

Service	Shape
Compute Engine	shape=mxgraph.gcp2.compute_engine;
Cloud Storage	shape=mxgraph.gcp2.cloud_storage;
Cloud Functions	shape=mxgraph.gcp2.cloud_functions;
Cloud SQL	shape=mxgraph.gcp2.cloud_sql;
GKE	shape=mxgraph.gcp2.google_kubernetes_engine;
Pub/Sub	shape=mxgraph.gcp2.cloud_pub_sub;
BigQuery	shape=mxgraph.gcp2.bigquery;

---

Kubernetes Diagrams

When to Use

Cluster architecture, deployment topology, service mesh visualization, resource planning.

Common Shapes

Resource	Shape
Pod	shape=mxgraph.kubernetes.pod;
Service	shape=mxgraph.kubernetes.svc;
Deployment	shape=mxgraph.kubernetes.deploy;
ReplicaSet	shape=mxgraph.kubernetes.rs;
Ingress	shape=mxgraph.kubernetes.ing;
ConfigMap	shape=mxgraph.kubernetes.cm;
Secret	shape=mxgraph.kubernetes.secret;
Namespace	shape=mxgraph.kubernetes.ns; (use as container)
Node	shape=mxgraph.kubernetes.node;
PersistentVolume	shape=mxgraph.kubernetes.pv;
PersistentVolumeClaim	shape=mxgraph.kubernetes.pvc;
StatefulSet	shape=mxgraph.kubernetes.sts;
DaemonSet	shape=mxgraph.kubernetes.ds;
Job	shape=mxgraph.kubernetes.job;
CronJob	shape=mxgraph.kubernetes.cronjob;

Conventions

• Group resources by namespace (use containers)
• Color nodes by role (master=blue, worker=green)
• Show traffic flow with labeled edges (port numbers, protocols)
• Use dashed lines for service discovery / DNS

---

Mindmaps

When to Use

Brainstorming, knowledge organization, meeting notes, feature exploration.

draw.io Implementation

Use the mindmap layout feature or manually create branching trees:

<mxCell id="center" value="Main Topic" style="ellipse;fillColor=#1ba1e2;fontColor=#ffffff;fontStyle=1;fontSize=16;" vertex="1" parent="1">
  <mxGeometry x="300" y="200" width="160" height="80" as="geometry"/>
</mxCell>
<mxCell id="branch1" value="Branch 1" style="rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
  <mxGeometry x="100" y="80" width="120" height="40" as="geometry"/>
</mxCell>
<mxCell id="eb1" style="curved=1;endArrow=none;" edge="1" source="center" target="branch1" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

• Use distinct colors per top-level branch
• Curved edges (curved=1;endArrow=none;)
• Decreasing font size for deeper levels

---

Org Charts

When to Use

Organizational structure, team composition, reporting lines, role definitions.

draw.io Implementation

Use tree layout with hierarchical shapes:

<mxCell id="ceo" value="&lt;b&gt;Jane Smith&lt;/b&gt;&lt;br&gt;CEO" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1ba1e2;fontColor=#ffffff;strokeColor=#006EAF;" vertex="1" parent="1">
  <mxGeometry x="250" y="20" width="140" height="60" as="geometry"/>
</mxCell>
<mxCell id="cto" value="&lt;b&gt;Bob Lee&lt;/b&gt;&lt;br&gt;CTO" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="130" width="140" height="60" as="geometry"/>
</mxCell>
<mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;endArrow=none;" edge="1" source="ceo" target="cto" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

• No arrows on edges (endArrow=none;)
• Use edgeStyle=orthogonalEdgeStyle for clean right-angle lines
• Color-code by department

---

Gantt Charts

When to Use

Project timeline visualization, milestone tracking, dependency mapping, resource planning.

draw.io Implementation

Build as a table with bars:

• Use a table/grid container for the timeline
• Draw colored rectangles for task bars
• Use arrows between bars for dependencies
• Add diamond shapes for milestones
• Label time axis with dates/weeks/sprints

---

Swimlane Diagrams

When to Use

Cross-functional processes, handoff documentation, responsibility assignment, workflow optimization.

Horizontal Swimlanes

<mxCell id="pool" value="" style="shape=table;startSize=0;container=1;collapsible=0;childLayout=tableLayout;" vertex="1" parent="1">
  <mxGeometry x="50" y="50" width="700" height="400" as="geometry"/>
</mxCell>
<mxCell id="lane1" value="Customer" style="swimlane;horizontal=0;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="pool">
  <mxGeometry y="0" width="700" height="130" as="geometry"/>
</mxCell>
<mxCell id="lane2" value="Support" style="swimlane;horizontal=0;startSize=40;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="pool">
  <mxGeometry y="130" width="700" height="130" as="geometry"/>
</mxCell>
<mxCell id="lane3" value="Engineering" style="swimlane;horizontal=0;startSize=40;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="pool">
  <mxGeometry y="260" width="700" height="140" as="geometry"/>
</mxCell>

---

Threat Model Diagrams (STRIDE / DFD)

When to Use

Security analysis, threat identification, data flow security review, compliance documentation.

Data Flow Diagram Elements

Element	Style	Meaning
Process	ellipse; (numbered circle)	Code that transforms data
Data Store	Two horizontal lines	Storage (DB, file, cache)
External Entity	Rectangle	Outside system boundary
Data Flow	Arrow with label	Data movement
Trust Boundary	dashed=1;dashPattern=8 4;strokeColor=#FF0000;strokeWidth=2;	Security perimeter

Style for Trust Boundary

<mxCell id="tb1" value="Trust Boundary" style="rounded=1;dashed=1;dashPattern=8 4;strokeColor=#FF0000;strokeWidth=2;fillColor=none;container=1;collapsible=0;fontColor=#FF0000;verticalAlign=top;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="400" height="300" as="geometry"/>
</mxCell>

STRIDE Categories

Label threats on data flows:

• Spoofing (identity)
• Tampering (data integrity)
• Repudiation (traceability)
• Information Disclosure (confidentiality)
• Denial of Service (availability)
• Elevation of Privilege (authorization)