Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-04-12 19:25:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
ca87cfcc9ef3d7e0383fb2ea6fe5443cfc735d95
awesome-copilot/skills/draw-io-diagram-generator/references/style-reference.md
Satya K 3b2c4fb913 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
2026-03-27 11:15:53 +11:00

15 KiB
Raw Blame History

draw.io Style Reference

Complete reference for the style attribute on <mxCell> elements. Styles are semicolon-delimited key=value pairs.

Style Format

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

rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;

Green Process Step

rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;

Yellow Decision Diamond

rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;

Red Error Box

rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;

Database Cylinder

shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;fillColor=#f5f5f5;strokeColor=#666666;

Swimlane Container

shape=pool;startSize=30;horizontal=1;fillColor=#f5f5f5;strokeColor=#999999;

Swimlane Lane

swimlane;startSize=30;fillColor=#ffffff;strokeColor=#999999;

Orthogonal Connector

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;

Directed Arrow (bold)

edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;endArrow=block;endFill=1;strokeWidth=2;

Dashed Dependency Line

edgeStyle=orthogonalEdgeStyle;dashed=1;endArrow=open;endFill=0;strokeColor=#666666;

ER Relationship Line (one-to-many)

edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERmandOne;endFill=1;startFill=1;

UML Inheritance Arrow (hollow triangle)

edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;

UML Composition (filled diamond)

edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;

UML Aggregation (open diamond)

edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;

UML Dependency (dashed arrow)

edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;

Invisible connector (for alignment)

edgeStyle=none;strokeColor=none;endArrow=none;
Reference in New Issue View Git Blame Copy Permalink