mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-14 04:05:58 +00:00
Add Draw.io Diagram Generator skill and instructions (#1179)
* Add draw-io diagram generator skill for awesome github copilot * Add comprehensive shape libraries and style reference documentation for draw.io - Introduced a new markdown file for draw.io shape libraries detailing various built-in shapes, their style keys, and usage. - Added a complete style reference for `<mxCell>` elements, including universal style keys, shape-specific keys, edge styles, and color palettes. - Included examples for common styles and shapes to aid users in creating diagrams effectively. * Add draw-io diagram validation and shape addition scripts * Add new diagram templates for flowchart, sequence, and UML class diagrams - Created a flowchart template with a structured layout including start, steps, decision points, and end. - Added a sequence diagram template illustrating interactions between a client, API server, and database with activation boxes and message arrows. - Introduced a UML class diagram template featuring an interface, classes, attributes, methods, and relationships, including composition and realization. * Add draw-io diagram generator skill to README with detailed usage instructions and bundled assets * Add draw.io instructions with workflow, XML structure rules, style conventions, and validation checklist * Add draw.io diagram standards to README instructions for enhanced diagram creation and editing * Moving diagram templates to assets/ to follow agentskills structure - Moved flowchart template with start, steps, decision points, and end nodes. - Moved sequence diagram template illustrating interactions between a client, API server, and database. - Moved UML class diagram template featuring an interface, classes, attributes, methods, and relationships. * Clarify installation instructions for draw.io VS Code extension in SKILL.md
This commit is contained in:
Satya K
GitHub
379
skills/draw-io-diagram-generator/references/drawio-xml-schema.md
Normal file
379
skills/draw-io-diagram-generator/references/drawio-xml-schema.md
Normal file
@@ -0,0 +1,379 @@
|
||||
# draw.io XML Schema Reference
|
||||
|
||||
Complete reference for the `.drawio` file format (mxGraph XML). Use this when generating, parsing, or validating diagram files.
|
||||
|
||||
---
|
||||
|
||||
## Top-Level Structure
|
||||
|
||||
Every `.drawio` file is XML with this root structure:
|
||||
|
||||
```xml
|
||||
<!-- Set modified to the current ISO 8601 timestamp when generating a new file -->
|
||||
<mxfile host="Electron" modified=""
|
||||
agent="draw.io" version="26.0.0" type="device">
|
||||
<diagram id="<unique-id>" name="<Page Name>">
|
||||
<mxGraphModel ...attributes...>
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<!-- All content cells here -->
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
```
|
||||
|
||||
### `<mxfile>` Attributes
|
||||
|
||||
| Attribute | Required | Default | Description |
|
||||
| ----------- | ---------- | --------- | ------------- |
|
||||
| `host` | No | `"app.diagrams.net"` | Origin editor (`"Electron"` for desktop/VS Code) |
|
||||
| `modified` | No | — | ISO 8601 timestamp |
|
||||
| `agent` | No | — | User agent string |
|
||||
| `version` | No | — | draw.io version |
|
||||
| `type` | No | `"device"` | Storage type |
|
||||
|
||||
### `<diagram>` Attributes
|
||||
|
||||
| Attribute | Required | Description |
|
||||
| ----------- | ---------- | ------------- |
|
||||
| `id` | Yes | Unique page identifier (any string) |
|
||||
| `name` | Yes | Tab label shown in editor |
|
||||
|
||||
### `<mxGraphModel>` Attributes
|
||||
|
||||
| Attribute | Type | Default | Description |
|
||||
| ----------- | ------ | --------- | ------------- |
|
||||
| `dx` | int | `1422` | Scroll X offset |
|
||||
| `dy` | int | `762` | Scroll Y offset |
|
||||
| `grid` | `0`/`1` | `1` | Show grid |
|
||||
| `gridSize` | int | `10` | Grid snap size in px |
|
||||
| `guides` | `0`/`1` | `1` | Show alignment guides |
|
||||
| `tooltips` | `0`/`1` | `1` | Enable tooltips |
|
||||
| `connect` | `0`/`1` | `1` | Enable connection arrows on hover |
|
||||
| `arrows` | `0`/`1` | `1` | Show directional arrows |
|
||||
| `fold` | `0`/`1` | `1` | Enable group fold/collapse |
|
||||
| `page` | `0`/`1` | `1` | Show page boundary |
|
||||
| `pageScale` | float | `1` | Page zoom scale |
|
||||
| `pageWidth` | int | `1169` | Page width in px (A4 landscape) |
|
||||
| `pageHeight` | int | `827` | Page height in px (A4 landscape) |
|
||||
| `math` | `0`/`1` | `0` | Enable LaTeX math rendering |
|
||||
| `shadow` | `0`/`1` | `0` | Global shadow on shapes |
|
||||
|
||||
**Common page sizes (px at 96dpi):**
|
||||
|
||||
| Format | Width | Height |
|
||||
| -------- | ------- | -------- |
|
||||
| A4 landscape | `1169` | `827` |
|
||||
| A4 portrait | `827` | `1169` |
|
||||
| A3 landscape | `1654` | `1169` |
|
||||
| Letter landscape | `1100` | `850` |
|
||||
| Letter portrait | `850` | `1100` |
|
||||
| Screen (16:9) | `1654` | `931` |
|
||||
|
||||
---
|
||||
|
||||
## Reserved Cells (Always Required)
|
||||
|
||||
```xml
|
||||
<mxCell id="0" /> <!-- Root cell — never omit, never add attributes -->
|
||||
<mxCell id="1" parent="0" /> <!-- Default layer — all cells are children of this -->
|
||||
```
|
||||
|
||||
These two cells MUST be the first entries inside `<root>`. IDs `0` and `1` are reserved and must not be used for any other cell.
|
||||
|
||||
---
|
||||
|
||||
## Vertex (Shape) Element
|
||||
|
||||
```xml
|
||||
<mxCell
|
||||
id="2"
|
||||
value="Label Text"
|
||||
style="rounded=1;whiteSpace=wrap;html=1;"
|
||||
vertex="1"
|
||||
parent="1">
|
||||
<mxGeometry x="200" y="160" width="120" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
### `<mxCell>` Vertex Attributes
|
||||
|
||||
| Attribute | Required | Type | Description |
|
||||
| ----------- | ---------- | ------ | ------------- |
|
||||
| `id` | Yes | string | Unique identifier within this diagram |
|
||||
| `value` | Yes | string | Label text (HTML allowed if style has `html=1`) |
|
||||
| `style` | Yes | string | Semicolon-delimited key=value style string |
|
||||
| `vertex` | Yes | `"1"` | Must be `"1"` to declare this as a shape |
|
||||
| `parent` | Yes | string | Parent cell ID (`"1"` for default layer) |
|
||||
|
||||
### `<mxGeometry>` Vertex Attributes
|
||||
|
||||
| Attribute | Required | Type | Description |
|
||||
| ----------- | ---------- | ------ | ------------- |
|
||||
| `x` | Yes | float | Left edge of shape (px from canvas origin) |
|
||||
| `y` | Yes | float | Top edge of shape (px from canvas origin) |
|
||||
| `width` | Yes | float | Shape width in px |
|
||||
| `height` | Yes | float | Shape height in px |
|
||||
| `as` | Yes | `"geometry"` | Always `"geometry"` |
|
||||
|
||||
---
|
||||
|
||||
## Edge (Connector) Element
|
||||
|
||||
```xml
|
||||
<mxCell
|
||||
id="5"
|
||||
value="Label"
|
||||
style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;"
|
||||
edge="1"
|
||||
source="2"
|
||||
target="3"
|
||||
parent="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
### `<mxCell>` Edge Attributes
|
||||
|
||||
| Attribute | Required | Type | Description |
|
||||
| ----------- | ---------- | ------ | ------------- |
|
||||
| `id` | Yes | string | Unique identifier |
|
||||
| `value` | Yes | string | Connector label (empty string for no label) |
|
||||
| `style` | Yes | string | Style string (see Edge Styles) |
|
||||
| `edge` | Yes | `"1"` | Must be `"1"` to declare as connector |
|
||||
| `source` | No | string | ID of source vertex |
|
||||
| `target` | No | string | ID of target vertex |
|
||||
| `parent` | Yes | string | Parent cell ID (usually `"1"`) |
|
||||
|
||||
### `<mxGeometry>` Edge Attributes
|
||||
|
||||
| Attribute | Required | Type | Description |
|
||||
| ----------- | ---------- | ------ | ------------- |
|
||||
| `relative` | No | `"1"` | Always `"1"` for edges |
|
||||
| `as` | Yes | `"geometry"` | Always `"geometry"` |
|
||||
|
||||
### Edge with Label Offset
|
||||
|
||||
```xml
|
||||
<mxGeometry x="-0.1" y="10" relative="1" as="geometry">
|
||||
<mxPoint as="offset" />
|
||||
</mxGeometry>
|
||||
```
|
||||
|
||||
The `x` on relative geometry moves the label along the edge (-1 to 1). `y` is perpendicular offset in px.
|
||||
|
||||
### Edge with Manual Waypoints (Control Points)
|
||||
|
||||
```xml
|
||||
<mxGeometry relative="1" as="geometry">
|
||||
<Array as="points">
|
||||
<mxPoint x="340" y="80" />
|
||||
<mxPoint x="340" y="200" />
|
||||
</Array>
|
||||
</mxGeometry>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Multi-Page Diagrams
|
||||
|
||||
```xml
|
||||
<mxfile>
|
||||
<diagram id="page-1" name="Overview">
|
||||
<mxGraphModel>...</mxGraphModel>
|
||||
</diagram>
|
||||
<diagram id="page-2" name="Detail">
|
||||
<mxGraphModel>...</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
```
|
||||
|
||||
Each `<diagram>` is a separate page/tab. Cell IDs are scoped to their own `<diagram>` — the same ID value can appear in different pages without conflict.
|
||||
|
||||
---
|
||||
|
||||
## Layer Cells
|
||||
|
||||
Layers replace the default `id="1"` layer. Cells are assigned to a layer via `parent`:
|
||||
|
||||
```xml
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" value="Background" parent="0" /> <!-- layer 1 -->
|
||||
<mxCell id="layer2" value="Services" parent="0" /> <!-- layer 2 -->
|
||||
<mxCell id="layer3" value="Connectors" parent="0" /> <!-- layer 3 -->
|
||||
|
||||
<!-- Assign layer via parent attribute -->
|
||||
<mxCell id="10" value="API" ... parent="layer2">
|
||||
<mxGeometry ... />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
Toggle layer visibility:
|
||||
|
||||
```xml
|
||||
<mxCell id="layer2" value="Services" parent="0" visible="0" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Swimlane Container
|
||||
|
||||
```xml
|
||||
<!-- Swimlane container -->
|
||||
<mxCell id="swim1" value="Process" style="shape=pool;startSize=30;horizontal=1;"
|
||||
vertex="1" parent="1">
|
||||
<mxGeometry x="40" y="40" width="800" height="340" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Lane 1 (child of swimlane container) -->
|
||||
<mxCell id="lane1" value="Customer" style="swimlane;startSize=30;"
|
||||
vertex="1" parent="swim1">
|
||||
<mxGeometry x="0" y="30" width="800" height="150" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Shape inside lane (child of lane) -->
|
||||
<mxCell id="step1" value="Place Order" style="rounded=1;whiteSpace=wrap;html=1;"
|
||||
vertex="1" parent="lane1">
|
||||
<mxGeometry x="80" y="50" width="120" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
> **Key**: Cells inside a swimlane have `parent` set to the **lane's ID**, not `"1"`.
|
||||
> Coordinates inside lanes are **relative to the lane origin**.
|
||||
|
||||
---
|
||||
|
||||
## Group Cells
|
||||
|
||||
```xml
|
||||
<!-- Invisible group container -->
|
||||
<mxCell id="group1" value="" style="group;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="300" height="200" as="geometry" />
|
||||
</mxCell>
|
||||
|
||||
<!-- Children relative to group origin -->
|
||||
<mxCell id="child1" value="A" style="rounded=1;" vertex="1" parent="group1">
|
||||
<mxGeometry x="20" y="20" width="100" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## HTML Labels
|
||||
|
||||
When `html=1` is in the style, `value` can contain HTML:
|
||||
|
||||
```xml
|
||||
<mxCell value="<b>OrderService</b><br><i>:8080</i>"
|
||||
style="rounded=1;html=1;" vertex="1" parent="1">
|
||||
<mxGeometry x="100" y="100" width="160" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
HTML must be XML-escaped:
|
||||
|
||||
- `<` → `<`
|
||||
- `>` → `>`
|
||||
- `&` → `&`
|
||||
- `"` → `"`
|
||||
|
||||
Common HTML tags supported: `<b>`, `<i>`, `<u>`, `<br>`, `<font color="#hex">`, `<span style="...">`, `<hr/>`
|
||||
|
||||
---
|
||||
|
||||
## Tooltip / Metadata
|
||||
|
||||
```xml
|
||||
<mxCell value="Service Name" tooltip="Handles order processing" style="..." vertex="1" parent="1">
|
||||
<mxGeometry ... />
|
||||
</mxCell>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ID Generation Rules
|
||||
|
||||
| Rule | Detail |
|
||||
| ------ | -------- |
|
||||
| IDs `0` and `1` | Reserved — always the root and default layer |
|
||||
| All other IDs | Must be unique within their `<diagram>` |
|
||||
| Safe pattern | Sequential integers starting at `2`, or UUID strings |
|
||||
| Cross-page | IDs do not need to be unique across different `<diagram>` pages |
|
||||
|
||||
**Safe sequential ID example:**
|
||||
|
||||
```text
|
||||
id="2", id="3", id="4", ...
|
||||
```
|
||||
|
||||
**UUID-style example:**
|
||||
|
||||
```text
|
||||
id="a1b2c3d4-e5f6-7890-abcd-ef1234567890"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Coordinate System
|
||||
|
||||
- Origin `(0, 0)` is **top-left** of the canvas
|
||||
- `x` increases **rightward**
|
||||
- `y` increases **downward**
|
||||
- All units are **pixels**
|
||||
|
||||
---
|
||||
|
||||
## Recommended Spacing
|
||||
|
||||
| Context | Value |
|
||||
| --------- | ------- |
|
||||
| Minimum gap between shapes | `40px` |
|
||||
| Comfortable gap | `80px` |
|
||||
| Swimlane inner padding | `20px` |
|
||||
| Page margin from edge | `40px` |
|
||||
| Connector routing clearance | `10px` |
|
||||
|
||||
---
|
||||
|
||||
## Minimal Valid `.drawio` File
|
||||
|
||||
```xml
|
||||
<mxfile host="Electron" modified="2026-03-25T00:00:00.000Z" version="26.0.0">
|
||||
<diagram id="main" name="Page-1">
|
||||
<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
|
||||
tooltips="1" connect="1" arrows="1" fold="1"
|
||||
page="1" pageScale="1" pageWidth="1169" pageHeight="827"
|
||||
math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Validation Rules
|
||||
|
||||
### Must Pass
|
||||
|
||||
- [ ] `id="0"` and `id="1"` cells always present as first two children of `<root>`
|
||||
- [ ] No other cell uses `id="0"` or `id="1"`
|
||||
- [ ] All `id` values are unique within each `<diagram>`
|
||||
- [ ] Every `<mxCell>` has exactly one `<mxGeometry>` child
|
||||
- [ ] `<mxGeometry>` has `as="geometry"` attribute
|
||||
- [ ] Vertex cells have `vertex="1"`, edge cells have `edge="1"`
|
||||
- [ ] Edge `source`/`target` IDs reference existing vertex IDs in the same diagram
|
||||
- [ ] Swimlane children have `parent` set to the swimlane/lane ID, not `"1"`
|
||||
- [ ] HTML in `value` attributes is XML-escaped
|
||||
|
||||
### Recommended
|
||||
|
||||
- [ ] Shapes do not overlap unless intentional (use ≥40px gap)
|
||||
- [ ] Edge labels are short (≤4 words)
|
||||
- [ ] Layer cells have descriptive `value` names
|
||||
- [ ] All shapes fit within `pageWidth` × `pageHeight` bounds
|
||||
334
skills/draw-io-diagram-generator/references/shape-libraries.md
Normal file
334
skills/draw-io-diagram-generator/references/shape-libraries.md
Normal file
@@ -0,0 +1,334 @@
|
||||
# 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.
|
||||
|
||||
| Shape | Style Key | Use For |
|
||||
| ------- | ----------- | --------- |
|
||||
| Rectangle | *(default)* | Boxes, steps, components |
|
||||
| Rounded Rectangle | `rounded=1;` | Softer process boxes |
|
||||
| Ellipse | `ellipse;` | States, start/end |
|
||||
| Triangle | `triangle;` | Arrows, gates |
|
||||
| Diamond | `rhombus;` | Decisions |
|
||||
| Hexagon | `shape=hexagon;` | Labels, tech icons |
|
||||
| Cloud | `shape=cloud;` | Cloud services |
|
||||
| Cylinder | `shape=cylinder3;` | Databases |
|
||||
| Note | `shape=note;` | Annotations |
|
||||
| Document | `shape=document;` | Files |
|
||||
| Arrow shapes | Various `mxgraph.arrows2.*` | Flow directions |
|
||||
| Callouts | `shape=callout;` | Speech bubbles |
|
||||
|
||||
---
|
||||
|
||||
### Flowchart
|
||||
|
||||
**Enable**: `View > Shapes > Flowchart`
|
||||
**Shape prefix**: `mxgraph.flowchart.`
|
||||
|
||||
Standard ANSI/ISO flowchart symbols.
|
||||
|
||||
| Symbol | Style String | ANSI Name |
|
||||
| -------- | ------------- | ----------- |
|
||||
| Start / End | `ellipse;` | Terminal |
|
||||
| Process (rectangle) | `rounded=1;` | Process |
|
||||
| Decision | `rhombus;` | Decision |
|
||||
| I/O (parallelogram) | `shape=mxgraph.flowchart.io;` | Data |
|
||||
| Predefined Process | `shape=mxgraph.flowchart.predefined_process;` | Predefined Process |
|
||||
| Manual Operation | `shape=mxgraph.flowchart.manual_operation;` | Manual Operation |
|
||||
| Manual Input | `shape=mxgraph.flowchart.manual_input;` | Manual Input |
|
||||
| Database | `shape=mxgraph.flowchart.database;` | Direct Access Storage |
|
||||
| Document | `shape=mxgraph.flowchart.document;` | Document |
|
||||
| Multiple Documents | `shape=mxgraph.flowchart.multi-document;` | Multiple Documents |
|
||||
| On-page Connector | `ellipse;` (small, 30×30) | Connector |
|
||||
| Off-page Connector | `shape=mxgraph.flowchart.off_page_connector;` | Off-page Connector |
|
||||
| Preparation | `shape=mxgraph.flowchart.preparation;` | Preparation |
|
||||
| Delay | `shape=mxgraph.flowchart.delay;` | Delay |
|
||||
| Display | `shape=mxgraph.flowchart.display;` | Display |
|
||||
| Internal Storage | `shape=mxgraph.flowchart.internal_storage;` | Internal Storage |
|
||||
| Sort | `shape=mxgraph.flowchart.sort;` | Sort |
|
||||
| Extract | `shape=mxgraph.flowchart.extract;` | Extract |
|
||||
| Merge | `shape=mxgraph.flowchart.merge;` | Merge |
|
||||
| Or | `shape=mxgraph.flowchart.or;` | Or |
|
||||
| Annotation | `shape=mxgraph.flowchart.annotation;` | Annotation |
|
||||
| Card | `shape=mxgraph.flowchart.card;` | Punched Card |
|
||||
|
||||
**Complete flowchart example style strings:**
|
||||
|
||||
```text
|
||||
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
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Actor | `shape=mxgraph.uml.actor;whiteSpace=wrap;html=1;` |
|
||||
| Use Case (ellipse) | `ellipse;whiteSpace=wrap;html=1;` |
|
||||
| System Boundary | `swimlane;startSize=30;whiteSpace=wrap;html=1;` |
|
||||
|
||||
#### Class Diagrams
|
||||
|
||||
Use swimlane containers for class boxes:
|
||||
|
||||
```xml
|
||||
<!-- Class container -->
|
||||
<mxCell value="«interface»
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
+ 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
+ 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
|
||||
|
||||
| Relationship | Style String |
|
||||
| ------------- | ------------- |
|
||||
| Inheritance (extends) | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;` |
|
||||
| Implementation (implements) | `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;` |
|
||||
| Association | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;` |
|
||||
| Dependency | `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;` |
|
||||
| Aggregation | `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;` |
|
||||
| Composition | `edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;` |
|
||||
|
||||
#### Component Diagram
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Component | `shape=component;align=left;spacingLeft=36;whiteSpace=wrap;html=1;` |
|
||||
| Interface (lollipop) | `ellipse;whiteSpace=wrap;html=1;aspect=fixed;` (small circle) |
|
||||
| Port | `shape=mxgraph.uml.port;` |
|
||||
| Node | `shape=mxgraph.uml.node;whiteSpace=wrap;html=1;` |
|
||||
| Artifact | `shape=mxgraph.uml.artifact;whiteSpace=wrap;html=1;` |
|
||||
|
||||
#### Sequence Diagrams
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Actor | `shape=mxgraph.uml.actor;whiteSpace=wrap;html=1;` |
|
||||
| Lifeline (object) | `shape=umlLifeline;startSize=40;whiteSpace=wrap;html=1;` |
|
||||
| Activation box | `shape=umlActivation;whiteSpace=wrap;html=1;` |
|
||||
| Sync message | `edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=block;endFill=1;` |
|
||||
| Async message | `edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=open;endFill=0;` |
|
||||
| Return | `edgeStyle=elbowEdgeStyle;elbow=vertical;dashed=1;html=1;endArrow=open;endFill=0;` |
|
||||
| Self-call | `edgeStyle=elbowEdgeStyle;elbow=vertical;exitX=1;exitY=0.3;entryX=1;entryY=0.5;html=1;` |
|
||||
|
||||
#### State Diagrams
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Initial state (solid circle) | `ellipse;html=1;aspect=fixed;fillColor=#000000;strokeColor=#000000;` |
|
||||
| State | `rounded=1;whiteSpace=wrap;html=1;arcSize=50;` |
|
||||
| Final state | `shape=doubleEllipse;fillColor=#000000;strokeColor=#000000;` |
|
||||
| Transition | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;` |
|
||||
| Fork/Join | `shape=mxgraph.uml.fork_or_join;html=1;fillColor=#000000;` |
|
||||
|
||||
---
|
||||
|
||||
### Entity Relationship (ER Diagrams)
|
||||
|
||||
**Enable**: `View > Shapes > Entity Relation`
|
||||
|
||||
#### Modern ER Tables (crow's foot notation)
|
||||
|
||||
```xml
|
||||
<!-- 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)
|
||||
|
||||
| Cardinality | Style String |
|
||||
| ------------- | ------------- |
|
||||
| One-to-one | `edgeStyle=entityRelationEdgeStyle;html=1;startArrow=ERmandOne;endArrow=ERmandOne;startFill=1;endFill=1;` |
|
||||
| One-to-many | `edgeStyle=entityRelationEdgeStyle;html=1;startArrow=ERmandOne;endArrow=ERmany;startFill=1;endFill=1;` |
|
||||
| Zero-to-many | `edgeStyle=entityRelationEdgeStyle;html=1;startArrow=ERmandOne;endArrow=ERzeroToMany;startFill=1;endFill=0;` |
|
||||
| Zero-to-one | `edgeStyle=entityRelationEdgeStyle;html=1;startArrow=ERmandOne;endArrow=ERzeroToOne;startFill=1;endFill=0;` |
|
||||
| Many-to-many | `edgeStyle=entityRelationEdgeStyle;html=1;startArrow=ERmany;endArrow=ERmany;startFill=1;endFill=1;` |
|
||||
|
||||
---
|
||||
|
||||
### Network / Infrastructure
|
||||
|
||||
**Enable**: `View > Shapes > Networking`
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Generic server | `shape=server;html=1;whiteSpace=wrap;` |
|
||||
| Web server | `shape=mxgraph.network.web_server;` |
|
||||
| Database server | `shape=mxgraph.network.database;` |
|
||||
| Laptop | `shape=mxgraph.network.laptop;` |
|
||||
| Desktop | `shape=mxgraph.network.desktop;` |
|
||||
| Mobile phone | `shape=mxgraph.network.mobile;` |
|
||||
| Router | `shape=mxgraph.cisco.routers.router;` |
|
||||
| Switch | `shape=mxgraph.cisco.switches.workgroup_switch;` |
|
||||
| Firewall | `shape=mxgraph.cisco.firewalls.firewall;` |
|
||||
| Cloud (generic) | `shape=cloud;` |
|
||||
| Internet | `shape=mxgraph.network.internet;` |
|
||||
| Load balancer | `shape=mxgraph.network.load_balancer;` |
|
||||
|
||||
---
|
||||
|
||||
### BPMN 2.0
|
||||
|
||||
**Enable**: `View > Shapes > BPMN`
|
||||
**Shape prefix**: `shape=mxgraph.bpmn.*`
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Start event | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.ellipsePerimeter;symbol=general;verticalLabelPosition=bottom;` |
|
||||
| End event | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.ellipsePerimeter;symbol=terminate;verticalLabelPosition=bottom;` |
|
||||
| Task | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rectanglePerimeter;symbol=task;` |
|
||||
| Exclusive gateway | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rhombusPerimeter;symbol=exclusiveGw;` |
|
||||
| Parallel gateway | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rhombusPerimeter;symbol=parallelGw;` |
|
||||
| Sub-process | `shape=mxgraph.bpmn.shape;perimeter=mxPerimeter.rectanglePerimeter;symbol=subProcess;` |
|
||||
| Sequence flow | `edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;` |
|
||||
| Message flow | `edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;` |
|
||||
| Pool | `shape=pool;startSize=30;horizontal=1;` |
|
||||
| Lane | `swimlane;startSize=30;` |
|
||||
|
||||
---
|
||||
|
||||
### Mockup / Wireframe
|
||||
|
||||
**Enable**: `View > Shapes > Mockup`
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Button | `shape=mxgraph.mockup.forms.button;` |
|
||||
| Input field | `shape=mxgraph.mockup.forms.text1;` |
|
||||
| Checkbox | `shape=mxgraph.mockup.forms.checkbox;` |
|
||||
| Dropdown | `shape=mxgraph.mockup.forms.comboBox;` |
|
||||
| Browser window | `shape=mxgraph.mockup.containers.browser;` |
|
||||
| Mobile screen | `shape=mxgraph.mockup.containers.smartphone;` |
|
||||
| List | `shape=mxgraph.mockup.containers.list;` |
|
||||
| Table | `shape=mxgraph.mockup.containers.table;` |
|
||||
|
||||
---
|
||||
|
||||
### Kubernetes
|
||||
|
||||
**Enable**: `View > Shapes > Kubernetes`
|
||||
|
||||
| Resource | Style String |
|
||||
| ---------- | ------------- |
|
||||
| Pod | `shape=mxgraph.kubernetes.pod;` |
|
||||
| Deployment | `shape=mxgraph.kubernetes.deploy;` |
|
||||
| Service | `shape=mxgraph.kubernetes.svc;` |
|
||||
| Ingress | `shape=mxgraph.kubernetes.ing;` |
|
||||
| ConfigMap | `shape=mxgraph.kubernetes.cm;` |
|
||||
| Secret | `shape=mxgraph.kubernetes.secret;` |
|
||||
| PersistentVolume | `shape=mxgraph.kubernetes.pv;` |
|
||||
| Namespace | `shape=mxgraph.kubernetes.ns;` |
|
||||
| Node | `shape=mxgraph.kubernetes.node;` |
|
||||
|
||||
---
|
||||
|
||||
## 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`:
|
||||
|
||||
```xml
|
||||
<mxlibrary>
|
||||
[
|
||||
{
|
||||
"xml": "<mxCell value=\"Component\" style=\"rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;\" vertex=\"1\"><mxGeometry width=\"120\" height=\"60\" as=\"geometry\" /></mxCell>",
|
||||
"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>
|
||||
```
|
||||
410
skills/draw-io-diagram-generator/references/style-reference.md
Normal file
410
skills/draw-io-diagram-generator/references/style-reference.md
Normal file
@@ -0,0 +1,410 @@
|
||||
# draw.io Style Reference
|
||||
|
||||
Complete reference for the `style` attribute on `<mxCell>` elements. Styles are semicolon-delimited `key=value` pairs.
|
||||
|
||||
---
|
||||
|
||||
## Style Format
|
||||
|
||||
```text
|
||||
style="key1=value1;key2=value2;key3=value3;"
|
||||
```
|
||||
|
||||
- Keys and values are case-sensitive
|
||||
- Trailing semicolon is optional but recommended
|
||||
- Unknown keys are silently ignored
|
||||
- Missing keys use draw.io defaults
|
||||
|
||||
---
|
||||
|
||||
## Universal Style Keys
|
||||
|
||||
Apply to all shapes and edges.
|
||||
|
||||
| Key | Values | Default | Description |
|
||||
| ----- | -------- | --------- | ------------- |
|
||||
| `fillColor` | `#hex` / `none` | `#FFFFFF` | Shape fill color (draw.io default; use semantic palette for project diagrams) |
|
||||
| `strokeColor` | `#hex` / `none` | `#000000` | Border/line color (draw.io default; use semantic palette for project diagrams) |
|
||||
| `fontColor` | `#hex` | `#000000` | Text color |
|
||||
| `fontSize` | integer | `11` | Font size in pt |
|
||||
| `fontStyle` | bitmask (see below) | `0` | Bold/italic/underline |
|
||||
| `fontFamily` | string | `Helvetica` | Font family name |
|
||||
| `align` | `left`/`center`/`right` | `center` | Horizontal text alignment |
|
||||
| `verticalAlign` | `top`/`middle`/`bottom` | `middle` | Vertical text alignment |
|
||||
| `opacity` | 0–100 | `100` | Shape opacity (%) |
|
||||
| `shadow` | `0`/`1` | `0` | Drop shadow |
|
||||
| `dashed` | `0`/`1` | `0` | Dashed border |
|
||||
| `dashPattern` | e.g. `8 8` | — | Custom dash/gap pattern (px) |
|
||||
| `strokeWidth` | float | `2` | Border/line width in px |
|
||||
| `spacing` | integer | `2` | Padding around text (px) |
|
||||
| `spacingTop` | integer | `0` | Top text padding |
|
||||
| `spacingBottom` | integer | `0` | Bottom text padding |
|
||||
| `spacingLeft` | integer | `4` | Left text padding |
|
||||
| `spacingRight` | integer | `4` | Right text padding |
|
||||
| `html` | `0`/`1` | `0` | Allow HTML in label |
|
||||
| `whiteSpace` | `wrap`/`nowrap` | `nowrap` | Text wrapping |
|
||||
| `overflow` | `visible`/`hidden`/`fill` | `visible` | Text overflow behaviour |
|
||||
| `rotatable` | `0`/`1` | `1` | Allow rotation in editor |
|
||||
| `movable` | `0`/`1` | `1` | Allow move in editor |
|
||||
| `resizable` | `0`/`1` | `1` | Allow resize in editor |
|
||||
| `deletable` | `0`/`1` | `1` | Allow delete in editor |
|
||||
| `editable` | `0`/`1` | `1` | Allow label edit in editor |
|
||||
| `locked` | `0`/`1` | `0` | Lock all editing |
|
||||
| `nolabel` | `0`/`1` | `0` | Hide label entirely |
|
||||
| `noLabel` | `0`/`1` | `0` | Alias of `nolabel` |
|
||||
| `labelPosition` | `left`/`center`/`right` | `center` | Label anchor horizontal |
|
||||
| `verticalLabelPosition` | `top`/`middle`/`bottom` | `middle` | Label anchor vertical |
|
||||
| `imageAlign` | `left`/`center`/`right` | `center` | Image alignment |
|
||||
|
||||
### `fontStyle` Bitmask Values
|
||||
|
||||
| Value | Effect |
|
||||
| ------- | -------- |
|
||||
| `0` | Normal |
|
||||
| `1` | Bold |
|
||||
| `2` | Italic |
|
||||
| `4` | Underline |
|
||||
| `8` | Strikethrough |
|
||||
|
||||
Combine by addition: `3` = bold + italic, `5` = bold + underline, `7` = bold + italic + underline.
|
||||
|
||||
---
|
||||
|
||||
## Shape Keys (Vertex Only)
|
||||
|
||||
| Key | Values | Description |
|
||||
| ----- | -------- | ------------- |
|
||||
| `shape` | see Shape Catalog | Override default rectangle shape |
|
||||
| `rounded` | `0`/`1` | Rounded corners on rectangle |
|
||||
| `arcSize` | 0–50 | Corner radius % (when `rounded=1`) |
|
||||
| `perimeter` | function name | Connection perimeter type |
|
||||
| `aspect` | `fixed` | Lock aspect ratio on resize |
|
||||
| `rotation` | float | Rotation in degrees |
|
||||
| `fixedSize` | `0`/`1` | Prevent auto-size when editing label |
|
||||
| `container` | `0`/`1` | Treat shape as container for children |
|
||||
| `collapsible` | `0`/`1` | Allow collapse/expand toggle |
|
||||
| `startSize` | integer | Header size in swimlane/container (px) |
|
||||
| `swimlaneHead` | `0`/`1` | Show swimlane header |
|
||||
| `swimlaneBody` | `0`/`1` | Show swimlane body |
|
||||
| `fillOpacity` | 0–100 | Fill-only opacity (independent of `opacity`) |
|
||||
| `strokeOpacity` | 0–100 | Stroke-only opacity |
|
||||
| `gradientColor` | `#hex` / `none` | Gradient end color |
|
||||
| `gradientDirection` | `north`/`south`/`east`/`west` | Gradient direction |
|
||||
| `sketch` | `0`/`1` | Rough hand-drawn style |
|
||||
| `comic` | `0`/`1` | Comic/cartoon line style |
|
||||
| `glass` | `0`/`1` | Glass reflection effect |
|
||||
|
||||
---
|
||||
|
||||
## Shape Catalog
|
||||
|
||||
### Basic Shapes
|
||||
|
||||
| Shape | Style String | Visual |
|
||||
| ------- | ------------- | -------- |
|
||||
| Rectangle (default) | *(no shape key needed)* | □ |
|
||||
| Rounded rectangle | `rounded=1;` | ▢ |
|
||||
| Ellipse / Circle | `ellipse;` | ○ |
|
||||
| Diamond | `rhombus;` | ◇ |
|
||||
| Triangle | `triangle;` | △ |
|
||||
| Hexagon | `shape=hexagon;` | ⬡ |
|
||||
| Pentagon | `shape=mxgraph.basic.pentagon;` | ⬠ |
|
||||
| Star | `shape=mxgraph.basic.star;` | ★ |
|
||||
| Cross | `shape=mxgraph.basic.x;` | ✕ |
|
||||
| Cloud | `shape=cloud;` | ☁ |
|
||||
| Note / Callout | `shape=note;folded=1;` | 📝 |
|
||||
| Document | `shape=document;` | 📄 |
|
||||
| Cylinder (database) | `shape=cylinder3;` | 🗄 |
|
||||
| Tape | `shape=tape;` | — |
|
||||
| Parallelogram | `shape=parallelogram;perimeter=parallelogramPerimeter;` | ▱ |
|
||||
|
||||
### Flowchart Shapes (`mxgraph.flowchart.*`)
|
||||
|
||||
| Shape | Style String | Used For |
|
||||
| ------- | ------------- | ---------- |
|
||||
| Process | `shape=mxgraph.flowchart.process;` | Standard process |
|
||||
| Start/End (terminal) | `ellipse;` or `shape=mxgraph.flowchart.terminate;` | Flow start/end |
|
||||
| Decision | `rhombus;` | Yes/No branch |
|
||||
| Data (I/O) | `shape=mxgraph.flowchart.io;` | Input/Output |
|
||||
| Predefined Process | `shape=mxgraph.flowchart.predefined_process;` | Subroutine |
|
||||
| Manual Input | `shape=mxgraph.flowchart.manual_input;` | Manual entry |
|
||||
| Manual Operation | `shape=mxgraph.flowchart.manual_operation;` | Manual step |
|
||||
| Database | `shape=mxgraph.flowchart.database;` | Data store |
|
||||
| Internal Storage | `shape=mxgraph.flowchart.internal_storage;` | Internal data |
|
||||
| Direct Data | `shape=mxgraph.flowchart.direct_data;` | Drum storage |
|
||||
| Document | `shape=mxgraph.flowchart.document;` | Document |
|
||||
| Multi-document | `shape=mxgraph.flowchart.multi-document;` | Multiple docs |
|
||||
| On-page Connector | `ellipse;` (small) | Page connector |
|
||||
| Off-page Connector | `shape=mxgraph.flowchart.off_page_connector;` | Off-page ref |
|
||||
| Preparation | `shape=mxgraph.flowchart.preparation;` | Initialization |
|
||||
| Delay | `shape=mxgraph.flowchart.delay;` | Wait state |
|
||||
| Display | `shape=mxgraph.flowchart.display;` | Output display |
|
||||
| Sort | `shape=mxgraph.flowchart.sort;` | Sort operation |
|
||||
| Extract | `shape=mxgraph.flowchart.extract;` | Extract operation |
|
||||
| Merge | `shape=mxgraph.flowchart.merge;` | Merge paths |
|
||||
| Or | `shape=mxgraph.flowchart.or;` | OR gate |
|
||||
| And | `shape=mxgraph.flowchart.and;` | AND gate |
|
||||
| Annotation | `shape=mxgraph.flowchart.annotation;` | Comment/note |
|
||||
|
||||
### UML Shapes (`mxgraph.uml.*`)
|
||||
|
||||
| Shape | Style String | Used For |
|
||||
| ------- | ------------- | ---------- |
|
||||
| Actor | `shape=mxgraph.uml.actor;` | Use-case actor |
|
||||
| Boundary | `shape=mxgraph.uml.boundary;` | System boundary |
|
||||
| Control | `shape=mxgraph.uml.control;` | Controller object |
|
||||
| Entity | `shape=mxgraph.uml.entity;` | Entity object |
|
||||
| Component | `shape=component;` | Component box |
|
||||
| Package | `shape=mxgraph.uml.package;` | Package |
|
||||
| Note | `shape=note;` | UML note |
|
||||
| Lifeline | `shape=umlLifeline;startSize=40;` | Sequence lifeline |
|
||||
| Activation | `shape=umlActivation;` | Activation box |
|
||||
| Destroy | `shape=mxgraph.uml.destroy;` | Destroy marker |
|
||||
| State | `ellipse;` | State node |
|
||||
| Initial State | `ellipse;fillColor=#000000;` | UML initial state |
|
||||
| Final State | `shape=doubleEllipse;fillColor=#000000;` | UML final state |
|
||||
| Fork/Join | `shape=mxgraph.uml.fork_or_join;` | Fork/join bar |
|
||||
|
||||
### Network Shapes (`mxgraph.network.*`)
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Server | `shape=server;` |
|
||||
| Database server | `shape=mxgraph.network.database;` |
|
||||
| Firewall | `shape=mxgraph.cisco.firewalls.firewall;` |
|
||||
| Router | `shape=mxgraph.cisco.routers.router;` |
|
||||
| Switch | `shape=mxgraph.cisco.switches.workgroup_switch;` |
|
||||
| Cloud | `shape=cloud;` |
|
||||
| Internet | `shape=mxgraph.network.internet;` |
|
||||
| Laptop | `shape=mxgraph.network.laptop;` |
|
||||
| Desktop | `shape=mxgraph.network.desktop;` |
|
||||
| Mobile | `shape=mxgraph.network.mobile;` |
|
||||
|
||||
### AWS Shapes (`mxgraph.aws4.*`)
|
||||
|
||||
Use the AWS4 library. Common shapes:
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| EC2 | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;` |
|
||||
| Lambda | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;` |
|
||||
| S3 | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;` |
|
||||
| RDS | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;` |
|
||||
| API Gateway | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.api_gateway;` |
|
||||
| CloudFront | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront;` |
|
||||
| Load Balancer | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elb;` |
|
||||
| SQS | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sqs;` |
|
||||
| SNS | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sns;` |
|
||||
| DynamoDB | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.dynamodb;` |
|
||||
| ECS | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ecs;` |
|
||||
| EKS | `shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.eks;` |
|
||||
| VPC | `shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;` |
|
||||
| Region | `shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_region;` |
|
||||
|
||||
### Azure Shapes (`mxgraph.azure.*`)
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| App Service | `shape=mxgraph.azure.app_service;` |
|
||||
| Function App | `shape=mxgraph.azure.function_apps;` |
|
||||
| SQL Database | `shape=mxgraph.azure.sql_database;` |
|
||||
| Blob Storage | `shape=mxgraph.azure.blob_storage;` |
|
||||
| API Management | `shape=mxgraph.azure.api_management;` |
|
||||
| Service Bus | `shape=mxgraph.azure.service_bus;` |
|
||||
| AKS | `shape=mxgraph.azure.aks;` |
|
||||
| Container Registry | `shape=mxgraph.azure.container_registry_registries;` |
|
||||
|
||||
### GCP Shapes (`mxgraph.gcp2.*`)
|
||||
|
||||
| Shape | Style String |
|
||||
| ------- | ------------- |
|
||||
| Cloud Run | `shape=mxgraph.gcp2.cloud_run;` |
|
||||
| Cloud Functions | `shape=mxgraph.gcp2.cloud_functions;` |
|
||||
| Cloud SQL | `shape=mxgraph.gcp2.cloud_sql;` |
|
||||
| Cloud Storage | `shape=mxgraph.gcp2.cloud_storage;` |
|
||||
| GKE | `shape=mxgraph.gcp2.container_engine;` |
|
||||
| Pub/Sub | `shape=mxgraph.gcp2.cloud_pubsub;` |
|
||||
| BigQuery | `shape=mxgraph.gcp2.bigquery;` |
|
||||
|
||||
---
|
||||
|
||||
## Edge Style Keys
|
||||
|
||||
| Key | Values | Description |
|
||||
| ----- | -------- | ------------- |
|
||||
| `edgeStyle` | see below | Connection routing algorithm |
|
||||
| `rounded` | `0`/`1` | Rounded corners on orthogonal edges |
|
||||
| `curved` | `0`/`1` | Curved line segments |
|
||||
| `orthogonal` | `0`/`1` | Force orthogonal routing |
|
||||
| `jettySize` | `auto`/integer | Source/target jet size |
|
||||
| `exitX` | 0.0–1.0 | Source exit point X (0=left, 0.5=center, 1=right) |
|
||||
| `exitY` | 0.0–1.0 | Source exit point Y (0=top, 0.5=center, 1=bottom) |
|
||||
| `exitDx` | float | Source exit X offset (px) |
|
||||
| `exitDy` | float | Source exit Y offset (px) |
|
||||
| `entryX` | 0.0–1.0 | Target entry point X |
|
||||
| `entryY` | 0.0–1.0 | Target entry point Y |
|
||||
| `entryDx` | float | Target entry X offset (px) |
|
||||
| `entryDy` | float | Target entry Y offset (px) |
|
||||
| `endArrow` | see Arrow Types | Arrow head at target |
|
||||
| `startArrow` | see Arrow Types | Arrow tail at source |
|
||||
| `endFill` | `0`/`1` | Filled end arrow head |
|
||||
| `startFill` | `0`/`1` | Filled start arrow head |
|
||||
| `endSize` | integer | End arrow head size (px) |
|
||||
| `startSize` | integer | Start arrow head size (px) |
|
||||
| `labelBackgroundColor` | `#hex`/`none` | Label background fill |
|
||||
| `labelBorderColor` | `#hex`/`none` | Label border color |
|
||||
|
||||
### `edgeStyle` Values
|
||||
|
||||
| Value | Routing | Use When |
|
||||
| ------- | --------- | ---------- |
|
||||
| `none` | Straight line | Simple direct connections |
|
||||
| `orthogonalEdgeStyle` | Right-angle turns | Flowcharts, architecture |
|
||||
| `elbowEdgeStyle` | Single elbow | Clean directional diagrams |
|
||||
| `entityRelationEdgeStyle` | ER-style routing | ER diagrams |
|
||||
| `segmentEdgeStyle` | Segmented with handles | Fine-tuned routing |
|
||||
| `isometricEdgeStyle` | Isometric grid | Isometric diagrams |
|
||||
|
||||
### Arrow Types (`endArrow` / `startArrow`)
|
||||
|
||||
| Value | Shape | Use For |
|
||||
| ------- | ------- | --------- |
|
||||
| `block` | Filled triangle | Standard directed arrow |
|
||||
| `open` | Open chevron → | Open/light arrow |
|
||||
| `classic` | Classic arrow | Default draw.io arrow |
|
||||
| `classicThin` | Thin classic | Compact diagrams |
|
||||
| `none` | No arrowhead | Undirected lines |
|
||||
| `oval` | Circle dot | Aggregation start |
|
||||
| `diamond` | Hollow diamond | Aggregation |
|
||||
| `diamondThin` | Thin diamond | Slim diagrams |
|
||||
| `ERone` | `\|` bar | ER cardinality "one" |
|
||||
| `ERmany` | Crow's foot | ER cardinality "many" |
|
||||
| `ERmandOne` | `\|\|` | ER mandatory one |
|
||||
| `ERzeroToOne` | `o\|` | ER zero-or-one |
|
||||
| `ERzeroToMany` | `o<` | ER zero-or-many |
|
||||
| `ERoneToMany` | `\|<` | ER one-or-many |
|
||||
|
||||
---
|
||||
|
||||
## Color Palette
|
||||
|
||||
### Semantic Colors (Recommended for Consistent Diagrams)
|
||||
|
||||
| Meaning | Fill | Stroke | Usage |
|
||||
| --------- | ------ | -------- | ------- |
|
||||
| User / Client | `#dae8fc` | `#6c8ebf` | Browser, client apps |
|
||||
| Service / Process | `#d5e8d4` | `#82b366` | Backend services |
|
||||
| Database / Storage | `#f5f5f5` | `#666666` | Databases, files |
|
||||
| Decision / Warning | `#fff2cc` | `#d6b656` | Decision nodes, alerts |
|
||||
| Error / Critical | `#f8cecc` | `#b85450` | Error paths, critical |
|
||||
| External / Partner | `#e1d5e7` | `#9673a6` | 3rd party, external |
|
||||
| Queue / Async | `#ffe6cc` | `#d79b00` | Message queues |
|
||||
| Gateway / Proxy | `#dae8fc` | `#0050ef` | API gateways, proxies |
|
||||
|
||||
### Dark Background Shapes
|
||||
|
||||
For dark-themed diagrams, swap to:
|
||||
|
||||
- Fill: `#1e4d78` (dark blue), `#1a4731` (dark green)
|
||||
- Stroke: `#4aa3df`, `#67ab9f`
|
||||
- Font: `#ffffff`
|
||||
|
||||
---
|
||||
|
||||
## Complete Style Examples
|
||||
|
||||
### Rounded Blue Box
|
||||
|
||||
```text
|
||||
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
|
||||
```
|
||||
|
||||
### Green Process Step
|
||||
|
||||
```text
|
||||
rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;
|
||||
```
|
||||
|
||||
### Yellow Decision Diamond
|
||||
|
||||
```text
|
||||
rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;
|
||||
```
|
||||
|
||||
### Red Error Box
|
||||
|
||||
```text
|
||||
rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;
|
||||
```
|
||||
|
||||
### Database Cylinder
|
||||
|
||||
```text
|
||||
shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;fillColor=#f5f5f5;strokeColor=#666666;
|
||||
```
|
||||
|
||||
### Swimlane Container
|
||||
|
||||
```text
|
||||
shape=pool;startSize=30;horizontal=1;fillColor=#f5f5f5;strokeColor=#999999;
|
||||
```
|
||||
|
||||
### Swimlane Lane
|
||||
|
||||
```text
|
||||
swimlane;startSize=30;fillColor=#ffffff;strokeColor=#999999;
|
||||
```
|
||||
|
||||
### Orthogonal Connector
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;
|
||||
```
|
||||
|
||||
### Directed Arrow (bold)
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=block;endFill=1;strokeWidth=2;
|
||||
```
|
||||
|
||||
### Dashed Dependency Line
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;dashed=1;endArrow=open;endFill=0;strokeColor=#666666;
|
||||
```
|
||||
|
||||
### ER Relationship Line (one-to-many)
|
||||
|
||||
```text
|
||||
edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERmandOne;endFill=1;startFill=1;
|
||||
```
|
||||
|
||||
### UML Inheritance Arrow (hollow triangle)
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;
|
||||
```
|
||||
|
||||
### UML Composition (filled diamond)
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;
|
||||
```
|
||||
|
||||
### UML Aggregation (open diamond)
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;
|
||||
```
|
||||
|
||||
### UML Dependency (dashed arrow)
|
||||
|
||||
```text
|
||||
edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;
|
||||
```
|
||||
|
||||
### Invisible connector (for alignment)
|
||||
|
||||
```text
|
||||
edgeStyle=none;strokeColor=none;endArrow=none;
|
||||
```
|
||||
Reference in New Issue
Block a user