CtrlK
BlogDocsLog inGet started
Tessl Logo

giuseppe-trisciuoglio/developer-kit

Comprehensive developer toolkit providing reusable skills for Java/Spring Boot, TypeScript/NestJS/React/Next.js, Python, PHP, AWS CloudFormation, AI/RAG, DevOps, and more.

89

Quality

89%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Risky

Do not use without reviewing

Overview
Quality
Evals
Security
Files

shape-styles.mdplugins/developer-kit-core/skills/drawio-logical-diagrams/references/

Shape Styles Reference

Complete reference for draw.io shapes and styles used in logical diagrams.

Basic Shapes

Rectangle

style="rounded=0;whiteSpace=wrap;html=1;"

Rounded Rectangle

style="rounded=1;whiteSpace=wrap;html=1;"

Ellipse (Circle/Oval)

style="ellipse;whiteSpace=wrap;html=1;"

Diamond (Rhombus)

style="rhombus;whiteSpace=wrap;html=1;"

Cylinder (Database)

style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;"

Hexagon

style="shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;"

Parallelogram

style="shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;"

Cloud (External System)

style="shape=cloud;whiteSpace=wrap;html=1;"

Folder

style="shape=folder;whiteSpace=wrap;html=1;"

Style Properties

Fill Colors

Color NameHex CodeUsage
Light Blue#dae8fcProcess/Service
Light Yellow#fff2ccDecision/Gateway
Light Green#d5e8d4Start/End/Success
Light Cyan#e1f5feData Store
Light Purple#f3e5f5External System
Light Red#f8ceccError/Stop
Light Orange#ffe0b2Actor/User
Light Gray#f5f5f5Container

Border Colors

Color NameHex CodeUsage
Blue#6c8ebfProcess border
Yellow#d6b656Decision border
Green#82b366Start/End border
Cyan#0277bdData store border
Purple#7b1fa2External system border
Red#b85450Error/Stop border
Orange#f57c00Actor border
Gray#666666Container border

Font Settings

fontFamily=Segoe UI
fontSize=10-14
fontColor=#333333
fontStyle=0 (normal), 1 (bold), 2 (italic)

Complete Shape Examples

Process Box

<mxCell id="2" value="Process Name"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="100" width="120" height="60" as="geometry" />
</mxCell>

Decision Diamond

<mxCell id="3" value="Decision?"
  style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="280" y="200" width="80" height="80" as="geometry" />
</mxCell>

Start/End Oval

<mxCell id="4" value="Start"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="300" width="80" height="40" as="geometry" />
</mxCell>

Data Store (Cylinder)

<mxCell id="5" value="Database"
  style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="100" width="60" height="80" as="geometry" />
</mxCell>

External System (Cloud)

<mxCell id="6" value="External API"
  style="shape=cloud;whiteSpace=wrap;html=1;fillColor=#f3e5f5;strokeColor=#7b1fa2;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="100" width="100" height="60" as="geometry" />
</mxCell>

Actor/User

<mxCell id="7" value="User"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#ffe0b2;strokeColor=#f57c00;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="50" y="200" width="60" height="40" as="geometry" />
</mxCell>

Error State

<mxCell id="8" value="Error"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;fontFamily=Segoe UI;"
  vertex="1" parent="1">
  <mxGeometry x="300" y="200" width="100" height="50" as="geometry" />
</mxCell>

Connector Styles

Standard Arrow

style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"

Dashed Arrow

style="edgeStyle=orthogonalEdgeStyle;rounded=0;dashed=1;dashPattern=5 5;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"

Open Arrow

style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=2;"

Block Arrow

style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=blockThin;endFill=1;strokeColor=#666666;strokeWidth=2;"

Curved Arrow

style="edgeStyle=curvedEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;"

Edge with Label

<mxCell id="10" value="Label"
  style="text;html=1;align=center;verticalAlign=middle;fontSize=11;fontColor=#333333;labelBackgroundColor=#ffffff;"
  vertex="1" parent="1">
  <mxGeometry x="250" y="160" width="40" height="20" as="geometry" />
</mxCell>

Container Styles

Simple Container

<mxCell id="20" value="Container Name"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;"
  vertex="1" parent="1">
  <mxGeometry x="100" y="50" width="400" height="300" as="geometry" />
</mxCell>

Dashed Container (Boundary)

<mxCell id="21" value="Boundary"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;dashed=1;dashPattern=8 4;fontSize=14;fontStyle=1;"
  vertex="1" parent="1">
  <mxGeometry x="100" y="50" width="400" height="300" as="geometry" />
</mxCell>

Child Elements in Containers

When placing elements inside a container, reference the container ID in the parent attribute:

<!-- Container -->
<mxCell id="20" value="Layer"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;"
  vertex="1" parent="1">
  <mxGeometry x="100" y="50" width="400" height="300" as="geometry" />
</mxCell>

<!-- Child element inside container -->
<mxCell id="21" value="Service"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
  vertex="1" parent="20">
  <mxGeometry x="20" y="30" width="100" height="50" as="geometry" />
</mxCell>

Special Characters

CharacterEntity
<&lt;
>&gt;
&&amp;
Line break&#xa; or <br> with html=1

Shape Examples

Process Box

<mxCell id="2" value="Process Name" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="200" y="100" width="120" height="60" as="geometry"/></mxCell>

Decision Diamond

<mxCell id="3" value="Decision?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="1"><mxGeometry x="280" y="200" width="80" height="80" as="geometry"/></mxCell>

Start/End Oval

<mxCell id="4" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="200" y="300" width="80" height="40" as="geometry"/></mxCell>

Data Store (Cylinder)

<mxCell id="5" value="Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;" vertex="1" parent="1"><mxGeometry x="400" y="100" width="60" height="80" as="geometry"/></mxCell>

Connector/Arrow

<mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell>

Coordinate Guidelines

Element Sizes

Element TypeWidthHeight
Process Box100-15050-70
Decision Diamond70-10070-100
Start/End70-10035-50
Data Store50-7070-90
Actor50-7040-50

Spacing

  • Between elements: 40-60px
  • Inside containers: 15-25px
  • Connector to element: 10-15px

plugins

developer-kit-core

skills

drawio-logical-diagrams

references

color-palette.md

constraints-warnings.md

diagram-templates.md

diagram-types-detailed.md

layout-best-practices.md

shape-examples.md

shape-styles.md

SKILL.md

README.md

CHANGELOG.md

context7.json

CONTRIBUTING.md

README_CN.md

README_ES.md

README_IT.md

README.md

tessl.json

tile.json