mirror of
https://github.com/github/awesome-copilot.git
synced 2026-04-13 11:45:56 +00:00
3b2c4fb913
* 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
170 lines
7.1 KiB
Plaintext
170 lines
7.1 KiB
Plaintext
<mxfile host="Electron" modified="2026-03-25T00:00:00.000Z" version="26.0.0">
|
|
<diagram id="sequence" name="Sequence Diagram">
|
|
<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" />
|
|
|
|
<!-- TITLE -->
|
|
<mxCell id="2" value="Sequence Diagram"
|
|
style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="334" y="20" width="500" height="40" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- ====== ACTOR BOXES (top row) ====== -->
|
|
<!-- Actor A: Client -->
|
|
<mxCell id="actorA" value="Client"
|
|
style="shape=mxgraph.uml.actor;pointerEvents=1;dashed=0;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=0;aspect=fixed;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="110" y="80" width="60" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- Actor B: API Server -->
|
|
<mxCell id="actorB" value="<b>API Server</b>"
|
|
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=13;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="480" y="100" width="160" height="60" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- Actor C: Database -->
|
|
<mxCell id="actorC" value="<b>Database</b>"
|
|
style="shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=13;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="870" y="90" width="80" height="80" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- ====== LIFELINES ====== -->
|
|
<!-- Lifeline A -->
|
|
<mxCell id="lifA" value=""
|
|
style="edgeStyle=none;dashed=1;endArrow=none;entryX=0.5;entryY=0;entryDx=0;entryDy=0;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<Array as="points" />
|
|
<mxPoint x="140" y="160" as="sourcePoint" />
|
|
<mxPoint x="140" y="780" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- Lifeline B -->
|
|
<mxCell id="lifB" value=""
|
|
style="edgeStyle=none;dashed=1;endArrow=none;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="560" y="160" as="sourcePoint" />
|
|
<mxPoint x="560" y="780" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- Lifeline C -->
|
|
<mxCell id="lifC" value=""
|
|
style="edgeStyle=none;dashed=1;endArrow=none;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="910" y="170" as="sourcePoint" />
|
|
<mxPoint x="910" y="780" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- ====== ACTIVATION BOXES (thin rectangles on lifelines) ====== -->
|
|
<!-- Activation on A during request flow -->
|
|
<mxCell id="actA1" value=""
|
|
style="fillColor=#dae8fc;strokeColor=#6c8ebf;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="130" y="220" width="20" height="200" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- Activation on B during processing -->
|
|
<mxCell id="actB1" value=""
|
|
style="fillColor=#fff2cc;strokeColor=#d6b656;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="550" y="260" width="20" height="120" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- Activation on C during DB query -->
|
|
<mxCell id="actC1" value=""
|
|
style="fillColor=#d5e8d4;strokeColor=#82b366;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="900" y="300" width="20" height="60" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- ====== MESSAGE ARROWS ====== -->
|
|
<!-- 1. A → B: Request -->
|
|
<mxCell id="msg1" value="1: POST /api/orders"
|
|
style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="150" y="240" as="sourcePoint" />
|
|
<mxPoint x="550" y="240" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- 2. B → B: Validate input (self-message) -->
|
|
<mxCell id="msg2" value="2: Validate & Authenticate"
|
|
style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="570" y="280" as="sourcePoint" />
|
|
<mxPoint x="570" y="300" as="targetPoint" />
|
|
<Array as="points">
|
|
<mxPoint x="620" y="280" />
|
|
<mxPoint x="620" y="300" />
|
|
</Array>
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- 3. B → C: Query -->
|
|
<mxCell id="msg3" value="3: INSERT orders (...)"
|
|
style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="570" y="320" as="sourcePoint" />
|
|
<mxPoint x="900" y="320" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- 4. C → B: Return result -->
|
|
<mxCell id="msg4" value="4: {id: 42, status: created}"
|
|
style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;dashed=1;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="900" y="360" as="sourcePoint" />
|
|
<mxPoint x="570" y="360" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- 5. B → A: Response -->
|
|
<mxCell id="msg5" value="5: 201 Created {orderId: 42}"
|
|
style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;dashed=1;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="550" y="410" as="sourcePoint" />
|
|
<mxPoint x="150" y="410" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
<!-- ====== NOTES ====== -->
|
|
<mxCell id="note1" value="<i>Requires Authorization header</i>"
|
|
style="shape=note;whiteSpace=wrap;html=1;backgroundOutline=1;fontSize=11;fillColor=#fffacd;strokeColor=#aaa;"
|
|
vertex="1" parent="1">
|
|
<mxGeometry x="200" y="220" width="200" height="40" as="geometry" />
|
|
</mxCell>
|
|
|
|
<!-- connector from note to arrow -->
|
|
<mxCell id="noteEdge1" value=""
|
|
style="edgeStyle=none;dashed=1;endArrow=none;"
|
|
edge="1" parent="1">
|
|
<mxGeometry relative="1" as="geometry">
|
|
<mxPoint x="290" y="240" as="sourcePoint" />
|
|
<mxPoint x="350" y="240" as="targetPoint" />
|
|
</mxGeometry>
|
|
</mxCell>
|
|
|
|
</root>
|
|
</mxGraphModel>
|
|
</diagram>
|
|
</mxfile>
|