How do I install the Diagram Types skill?

Run npx skillmds@latest add lobbi-docs/diagram-types in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Diagram Types skill do?

Comprehensive guide to all diagram types with selection criteria, notation rules, and draw.io implementation It is listed under Coding & Dev Tools on SkillMD.

Is Diagram Types safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Diagram Types?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Diagram Types free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Diagram Types?

Lobbi-Docs (@lobbi-docs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Diagram Types by lobbi-docs — Agent Skill

Name: Diagram Types
Author: Lobbi-Docs

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)

Diagram Types

File contents

Diagram Types Reference

Quick Selection Guide

Flowcharts

When to Use

Shapes and Notation

Swimlane Variant

Minimal XML Example

UML Class Diagrams

When to Use

Notation

Relationship Types

Multiplicity Labels

draw.io Class Shape

UML Sequence Diagrams

When to Use

Notation

Combined Fragments

Minimal Example

UML State Diagrams

When to Use

Notation

Example

UML Activity Diagrams

When to Use

Notation

UML Component Diagrams

When to Use

Notation

UML Deployment Diagrams

When to Use

Notation

UML Use Case Diagrams

When to Use

Notation

C4 Model

When to Use

Level 1: System Context

Level 2: Container

Level 3: Component

Level 4: Code

C4 Label Format

Minimal C4 Context Example

BPMN 2.0

When to Use

Events

Activities

Gateways

Flows

Pools and Lanes

ER Diagrams

When to Use

Chen Notation

Crow's Foot Notation (recommended)

Table-Style Entity

Network Diagrams

When to Use

Common Shapes

Conventions

Cloud Architecture Diagrams

When to Use

AWS Architecture

Azure Architecture

GCP Architecture

Kubernetes Diagrams

When to Use

Common Shapes

Conventions

Mindmaps

When to Use

draw.io Implementation

Org Charts

When to Use

draw.io Implementation

Gantt Charts

When to Use

draw.io Implementation

Swimlane Diagrams

When to Use