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.

Quality

89%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Risky

Do not use without reviewing

Shape Examples - XML Reference

Name: giuseppe-trisciuoglio/developer-kit
Rating: 89.68656716417911 (1 reviews)
Author: giuseppe-trisciuoglio

Complete XML examples for common shapes in draw.io format.

Simple 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>

Attributes:

rounded=1 - Rounded corners (use 0 for square corners)
whiteSpace=wrap - Text wraps within shape
html=1 - Enable HTML formatting
fillColor - Background color
strokeColor - Border color
fontSize - Text size in pixels

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>

Note: Diamonds should be square (width = height) for best appearance.

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>

Style tip: Use green for start points, red for end points.

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>

Shape-specific attributes:

shape=cylinder3 - Use cylinder shape
boundedLbl=1 - Keep label within cylinder bounds

Process/Document (Parallelogram)

<mxCell id="6" value="Input Data"
  style="shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="200" y="200" width="120" height="60" as="geometry" />
</mxCell>

Attributes:

shape=ext - Extended shape
double=1 - Creates parallelogram effect

Container (Grouping Box)

<mxCell id="7" value="Subsystem"
  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>

Usage: Groups related elements together.

Connector/Arrow (Standard Flow)

<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>

Attributes:

edgeStyle=orthogonalEdgeStyle - Right-angle bends
endArrow=classic - Filled triangle arrowhead
endFill=1 - Solid arrowhead
strokeWidth=2 - Line thickness

Dashed Connector (Alternative Flow)

<mxCell id="11"
  style="edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;"
  edge="1" parent="1" source="2" target="4">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Usage: Shows optional or alternative flows.

Label on Connector

<mxCell id="12" value="Data"
  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>

Tip: Position labels near the midpoint of connectors for clarity.

Actor/User Symbol

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

Color: Orange indicates external actors/users.

Error/Stop Symbol

<mxCell id="14" value="Error"
  style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;"
  vertex="1" parent="1">
  <mxGeometry x="400" y="300" width="80" height="40" as="geometry" />
</mxCell>

Color: Red indicates errors or exceptional conditions.

Style Quick Reference

Purpose	Style String
Basic rectangle	`rounded=0;whiteSpace=wrap;html=1;`
Rounded rectangle	`rounded=1;whiteSpace=wrap;html=1;`
Circle/Ellipse	`ellipse;whiteSpace=wrap;html=1;`
Diamond	`rhombus;whiteSpace=wrap;html=1;`
Cylinder	`shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;`
Parallelogram	`shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;`
Hexagon	`shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;`