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.

82

Quality

82%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Risky

Do not use without reviewing

Validation failed for skills in this tile
One or more skills have errors that need to be fixed before they can move to Implementation and Discovery review.
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

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

diagram-templates.md

shape-styles.md

SKILL.md

README.md

tile.json