New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Drawio Logical Diagrams

by giuseppe-trisciuoglio in giuseppe-trisciuoglio/developer-kit

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files).

MITAuto-check: notesDevelopment

Install Drawio Logical Diagrams

skills CLI
$ npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install giuseppe-trisciuoglio/developer-kit drawio-logical-diagrams --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/giuseppe-trisciuoglio/developer-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/developer-kit-core/skills/drawio-logical-diagrams .claude/skills/drawio-logical-diagrams && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
drawio-logical-diagrams
GitHub stars
357
Token cost
~3.9k tokens
SKILL.md length
705 words
Files
8 (incl. references)
Skills in repo
115
Repo updated
First seen
Licence
MIT

At a glance

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files).

  • Works in 8 steps: Analyze the request: Understand the… → Choose diagram type: Flowchart,… → Identify elements: Determine actors,… → …
  • Logical flow diagrams showing data/process flow between system components
  • SKILL.md covers Overview, When to Use, Instructions and Draw.io XML Structure, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Drawio Logical Diagrams is an agent skill from giuseppe-trisciuoglio/developer-kit. Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on…

Its SKILL.md is about 3.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files (for example `references/color-palette.md`, `references/constraints-warnings.md` and `references/diagram-templates.md`).

It sits in Development, covering Diagrams. It works with draw.io, Amazon Web Services and Microsoft Azure. The repository describes itself as: Modular plugin marketplace for Claude Code and agentic CLIs, with validated, spec-driven skills, agents, commands, and workflows for Java, TypeScript, Python, PHP, AWS, and AI. The licence is MIT.

When your agent uses it

  • Logical flow diagrams showing data/process flow between system components
  • Logical architecture diagrams representing system structure without cloud provider specifics
  • BPMN process diagrams
  • UML diagrams (class

Example prompts

  • “Use the drawio-logical-diagrams skill to create professional logical flow diagrams and logical system architecture diagrams using draw.io XML format…”
  • “/drawio-logical-diagrams”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Bash

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Analyze the request: Understand the system/process to diagram
  2. Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
  3. Identify elements: Determine actors, processes, data stores, connectors
  4. Draft XML structure: Create the mxGraphModel with proper root cells
  5. Add shapes: Create mxCell elements with appropriate styles
  6. Add connectors: Link elements with edge elements
  7. Validate XML: Verify XML is well-formed and all IDs are unique (see validation checklist below)
  8. Output: Write the .drawio file for the user

What it can do on your machine

Read from SKILL.md and the folder at commit fe73fb3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Bash

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are xml).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Drawio Logical Diagrams loads about 3.9k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 165 tokens; SKILL.md has 705 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~165
When it runs · the whole SKILL.md, loaded when a task matches
~3.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~18k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Write, Bash

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from giuseppe-trisciuoglio/developer-kit at commit fe73fb3, republished under its MIT licence (© giuseppe-trisciuoglio). 705 words, ~3,869 tokens.

Download SKILL.mdSave it as .claude/skills/drawio-logical-diagrams/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.
name
drawio-logical-diagrams
description
Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).
allowed-tools
Read, Write, Bash

Draw.io Logical Diagrams Creation

Overview

Create professional logical diagrams in draw.io's native XML format for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.

When to Use

  • Creating logical flow diagrams showing data flow between system components
  • Designing logical architecture diagrams (abstract system structure)
  • Building BPMN process diagrams for business processes
  • Drawing UML diagrams (class, sequence, activity, state)
  • Creating data flow diagrams (DFD) for system analysis
  • Making decision flowcharts with branching logic
  • Visualizing system interactions and sequences
  • Documenting logical system design without cloud specifics

Do NOT use for: AWS/Azure/GCP architecture diagrams (use aws-drawio-architecture-diagrams).

Instructions

Creating a Logical Diagram
  1. Analyze the request: Understand the system/process to diagram
  2. Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
  3. Identify elements: Determine actors, processes, data stores, connectors
  4. Draft XML structure: Create the mxGraphModel with proper root cells
  5. Add shapes: Create mxCell elements with appropriate styles
  6. Add connectors: Link elements with edge elements
  7. Validate XML: Verify XML is well-formed and all IDs are unique (see validation checklist below)
  8. Output: Write the .drawio file for the user
XML Validation Checklist

Before outputting the file, verify:

  • All tags are properly closed (no unclosed <mxCell>, </mxGeometry>, etc.)
  • All cell IDs are unique (0 and 1 are reserved root cells, use sequential integers starting from 2)
  • All source and target attributes reference existing cell IDs
  • All parent attributes reference existing cell IDs
  • All coordinates (x, y, width, height) are positive numbers
  • Special characters are escaped (< → &lt;, > → &gt;, & → &amp;)
  • Multi-line labels use &#xa; or <br> with html=1 in style
Key XML Components
ComponentDescription
mxfileRoot element with host and version
diagramContains the diagram definition
mxGraphModelCanvas settings (grid, page size)
rootContainer for all cells (must include id="0" and id="1")
mxCellIndividual shapes (vertices) or connectors (edges)

Draw.io XML Structure

xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="logical-flow-1" name="Logical Flow">
    <mxGraphModel dx="1200" dy="800" 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" />
        <!-- Shapes and connectors here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Key rules:

  • IDs "0" and "1" are reserved for root cells
  • Use sequential integer IDs starting from "2"
  • Use landscape orientation for architecture diagrams
  • All coordinates must be positive and aligned to grid (multiples of 10)

Generic Shapes and Styles

Basic Shape Types
ShapeStyle
Rectanglerounded=0;whiteSpace=wrap;html=1;
Rounded Rectanglerounded=1;whiteSpace=wrap;html=1;
Ellipse/Circleellipse;whiteSpace=wrap;html=1;
Diamondrhombus;whiteSpace=wrap;html=1;
Cylindershape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;
Hexagonshape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;
Parallelogramshape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;
Standard Color Palette
Element TypeFill ColorBorder ColorUsage
Process#dae8fc#6c8ebfOperations/actions
Decision#fff2cc#d6b656Conditional branches
Start/End#d5e8d4#82b366Terminal states
Data/Store#e1f5fe#0277bdDatabases/files
Entity#f3e5f5#7b1fa2External systems
Error/Stop#f8cecc#b85450Error states
Actor/User#ffe0b2#f57c00Users/actors
Container#f5f5f5#666666Grouping areas
Connector Styles

Standard flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;

Dashed (alternative/optional):

edgeStyle=orthogonalEdgeStyle;dashed=1;dashPattern=5 5;strokeColor=#666666;

Arrow head styles:

  • endArrow=classic;endFill=1 - Filled triangle
  • endArrow=open;endFill=0 - Open arrow
  • endArrow=blockThin;endFill=1 - Block arrow
Show full SKILL.md (274 more words)Show less

Diagram Types

TypeKey Elements
Logical FlowActors (orange), Services (blue), Data Stores (cyan), External Systems (purple)
Logical ArchitectureLayered containers with nested components
BPMNCircle (Start/End), Rounded Rectangle (Activity), Diamond (Gateway)
UML SequenceVertical lifelines with message arrows
DFDSquare (Entity), Circle (Process), Open Rectangle (Data Store)

Reference Files

For detailed shape examples and style references, see:

Examples

Example 1: Order Processing Flow

Request: "Create a logical flow diagram showing order processing: customer submits order, system validates, if valid then processes payment and ships, if invalid notifies customer."

xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="order-flow-1" name="Order Processing">
    <mxGraphModel dx="1200" dy="800" 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"/>
        <mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="50" width="80" height="40" as="geometry"/></mxCell>
        <mxCell id="3" value="Submit Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="130" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="4" value="Validate&#xa;Order?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="230" width="80" height="80" as="geometry"/></mxCell>
        <mxCell id="5" value="Notify&#xa;Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;fontSize=12;" vertex="1" parent="1"><mxGeometry x="220" y="240" width="100" height="50" as="geometry"/></mxCell>
        <mxCell id="6" value="Process&#xa;Payment" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="350" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="7" value="Ship Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="1"><mxGeometry x="60" y="450" width="120" height="60" as="geometry"/></mxCell>
        <mxCell id="8" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;fontSize=12;" vertex="1" parent="1"><mxGeometry x="80" y="550" width="80" height="40" as="geometry"/></mxCell>
        <mxCell id="10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="3"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="3" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="12" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="5"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="13" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#82b366;strokeWidth=2;fontSize=11;" edge="1" parent="1" source="4" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="14" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="6" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="7" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#b85450;strokeWidth=2;" edge="1" parent="1" source="5" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
Example 2: Three-Tier Logical Architecture

Request: "Create a logical architecture diagram for a web application with presentation, business logic, and data tiers."

xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Architecture">
    <mxGraphModel dx="1200" dy="800" 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"/>
        <mxCell id="2" 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>
        <mxCell id="3" value="Presentation Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="40" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="4" value="Web&#xa;Browser" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="5" value="Mobile&#xa;App" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="3"><mxGeometry x="120" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="7" value="Application Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="260" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="8" value="API&#xa;Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;fontSize=12;" vertex="1" parent="7"><mxGeometry x="20" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="9" value="Business&#xa;Logic" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;" vertex="1" parent="7"><mxGeometry x="110" y="30" width="80" height="50" as="geometry"/></mxCell>
        <mxCell id="11" value="Data Layer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;fontSize=14;fontStyle=1;" vertex="1" parent="1"><mxGeometry x="160" y="480" width="300" height="180" as="geometry"/></mxCell>
        <mxCell id="12" value="Primary&#xa;Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#e1f5fe;strokeColor=#0277bd;fontSize=12;" vertex="1" parent="11"><mxGeometry x="20" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="13" value="Cache" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;fillColor=#fff3e0;strokeColor=#e65100;fontSize=12;" vertex="1" parent="11"><mxGeometry x="100" y="30" width="60" height="80" as="geometry"/></mxCell>
        <mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="2" target="4"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="4" target="8"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="8" target="9"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=classic;endFill=1;strokeColor=#666666;strokeWidth=2;" edge="1" parent="1" source="9" target="12"><mxGeometry relative="1" as="geometry"/></mxCell>
        <mxCell id="24" value="query" style="edgeStyle=orthogonalEdgeStyle;rounded=0;endArrow=open;endFill=0;strokeColor=#666666;strokeWidth=1;fontSize=10;dashed=1;" edge="1" parent="1" source="9" target="13"><mxGeometry relative="1" as="geometry"/></mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

For additional templates (microservice architecture, event-driven, decision tree, sequence, DFD), see diagram-templates.md.

Constraints and Warnings

Critical Constraints
  1. XML validity: Always close tags properly and escape special characters
  2. Unique IDs: All cell IDs must be unique (except parent "0" and "1")
  3. Valid references: Source/target must reference existing cell IDs
  4. Positive coordinates: All x, y values must be >= 0
Warnings
  • XML files must be well-formed or will fail to open in draw.io
  • Invalid parent references cause elements to disappear
  • Negative coordinates place elements outside visible canvas

Best Practices

  1. Use consistent colors per element type across all diagrams
  2. Keep arrows straight with minimal bends
  3. Place labels at least 20px from arrow lines
  4. Group related elements in containers
  5. Use 12-14px font for labels, 10-11px for annotations
  6. Align all coordinates to grid (multiples of 10)
  7. Use high contrast colors and don't rely solely on color for meaning

© giuseppe-trisciuoglio, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in plugins/developer-kit-core/skills/drawio-logical-diagrams of giuseppe-trisciuoglio/developer-kit.

  • SKILL.md
  • references/color-palette.md
  • references/constraints-warnings.md
  • references/diagram-templates.md
  • references/diagram-types-detailed.md
  • references/layout-best-practices.md
  • references/shape-examples.md
  • references/shape-styles.md

Open the folder on GitHubat commit fe73fb3

Compare with similar skills

Drawio Logical Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Drawio Logical Diagrams compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Drawio Logical Diagrams this skillgiuseppe-trisciuoglio/developer-kit357—~3.9kAutomated safety check: NotesMIT
Drawio MCP Diagrammingthomast1906/github-copilot-agent-skills202—~6.6kAutomated safety check: PassNone
Architecture DiagramMathews-Tom/armory329—~4.8kAutomated safety check: PassMIT
Drawio Azuresparklabx/drawio-ai-kit655—~1.6kAutomated safety check: PassMIT
AWS DrawIO Diagram Generatora5c-ai/babysitter1.8k—~4.2kAutomated safety check: PassMIT
Azv Azure To DiagramAzure/AZVerify101—~5.7kAutomated safety check: PassMIT

Similar skills

  • Drawio MCP Diagramming

    thomast1906/github-copilot-agent-skills

    Create and edit diagrams using the Draw.io MCP server — any shape, any vendor.

    202 GitHub stars~6.6k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

  • Architecture Diagram

    Mathews-Tom/armory

    Generate architecture diagrams as fully editable SVG with native AWS, Azure, and GCP icons for cloud diagrams, or hand-drawn generic icons for everything else.

    329 GitHub stars~4.8k tokensUpdated 5 days ago
    DevelopmentAuto-check passed

  • Drawio Azure

    sparklabx/drawio-ai-kit

    A skill your agent uses when the user asks for an Azure architecture diagram — VNet/networking, App Service, AKS, landing zone, multi-region, or any diagram built with Azure service icons.

    655 GitHub stars~1.6k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • AWS DrawIO Diagram Generator

    a5c-ai/babysitter

    Creates and edits AWS architecture diagrams as DrawIO XML, converting a text description or an image and reading existing files back into shapes.

    1.8k GitHub stars~4.2k tokensUpdated 24 days ago
    DevelopmentAuto-check passed

  • Azv Azure To Diagram

    Azure/AZVerify

    Official

    Reverse-engineer a live Azure scope (resource group or filtered subscription) into a professional Draw.io architecture diagram following established AzVerify conventions.

    101 GitHub stars~5.7k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

  • Azure Draw.io MCP Diagrams

    thomast1906/github-copilot-agent-skills

    Creates and edits architecture diagrams through the Draw.io MCP tool, with guidance for rendering Azure icons correctly and laying out network diagrams.

    202 GitHub stars~3.1k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

More from giuseppe-trisciuoglio/developer-kit

All 115 skills in this repo

  • Nestjs Drizzle Crud Generator

    giuseppe-trisciuoglio/developer-kit

    Generates complete CRUD modules for NestJS applications with Drizzle ORM.

    357 GitHub stars~1.3k tokensUpdated 1 mo ago
    Auto-check: notes

  • Spring Boot Actuator

    giuseppe-trisciuoglio/developer-kit

    Provides patterns to configure Spring Boot Actuator for production-grade monitoring, health probes, secured management endpoints, and Micrometer metrics across JVM services.

    357 GitHub stars~2.2k tokensUpdated 1 mo ago
    Auto-check: notes

  • Spring Boot Crud Patterns

    giuseppe-trisciuoglio/developer-kit

    Provides and generates complete CRUD workflows for Spring Boot 3 services.

    357 GitHub stars~2.5k tokensUpdated 1 mo ago
    Auto-check: notes

  • Spring Boot Security JWT

    giuseppe-trisciuoglio/developer-kit

    Provides JWT authentication and authorization patterns for Spring Boot 3.5.x covering token generation with JJWT, Bearer/cookie authentication, database/OAuth2 integration, and RBAC/permission-based…

    357 GitHub stars~3.9k tokensUpdated 1 mo ago
    Auto-check: notes

  • AWS CLI Beast

    giuseppe-trisciuoglio/developer-kit

    Provides advanced AWS CLI patterns for managing EC2, Lambda, S3, DynamoDB, RDS, VPC, IAM, and CloudWatch.

    357 GitHub stars~1.7k tokensUpdated 1 mo ago
    Auto-check: notes

  • PR Review Comments

    giuseppe-trisciuoglio/developer-kit

    Posts review findings from a JSON file as inline comments on a GitHub Pull Request, attaching each comment to its file and line.

    357 GitHub stars~1k tokensUpdated 1 mo ago
    Auto-check: notes

Works with

Categories

Questions about Drawio Logical Diagrams

What does Drawio Logical Diagrams do?

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Drawio Logical Diagrams is an agent skill from giuseppe-trisciuoglio/developer-kit.drawio files).

When should I use Drawio Logical Diagrams?

Drawio Logical Diagrams fits situations like: logical flow diagrams showing data/process flow between system components; logical architecture diagrams representing system structure without cloud provider specifics; BPMN process diagrams; UML diagrams (class.

How do I install Drawio Logical Diagrams in Claude Code?

Run `npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a claude-code`. Or copy the skill folder (plugins/developer-kit-core/skills/drawio-logical-diagrams in giuseppe-trisciuoglio/developer-kit) into .claude/skills/drawio-logical-diagrams in your project. Claude Code loads it when a task matches its description.

How do I install Drawio Logical Diagrams in Codex?

Run `npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a codex`. Or copy the skill folder (plugins/developer-kit-core/skills/drawio-logical-diagrams in giuseppe-trisciuoglio/developer-kit) into .agents/skills/drawio-logical-diagrams in your project. Codex loads it when a task matches its description.

Can I use Drawio Logical Diagrams in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/drawio-logical-diagrams, .gemini/skills/drawio-logical-diagrams, .github/skills/drawio-logical-diagrams and .opencode/skills/drawio-logical-diagrams in your project.

What does Drawio Logical Diagrams need to run?

SKILL.md names no scripts, command-line tools or credentials: Drawio Logical Diagrams is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Bash.

Does Drawio Logical Diagrams access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Drawio Logical Diagrams safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Drawio Logical Diagrams use?

Drawio Logical Diagrams is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Drawio Logical Diagrams use?

About 3.9k tokens (SKILL.md is roughly 15k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 14k tokens, read only when the agent opens those files.

What are the alternatives to Drawio Logical Diagrams?

Skills that share tags, products or a category with Drawio Logical Diagrams: Drawio MCP Diagramming (thomast1906/github-copilot-agent-skills, 202 stars), Architecture Diagram (Mathews-Tom/armory, 329 stars), Drawio Azure (sparklabx/drawio-ai-kit, 655 stars) and AWS DrawIO Diagram Generator (a5c-ai/babysitter, 1.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Drawio Logical Diagrams?

giuseppe-trisciuoglio (a GitHub user) maintains it in giuseppe-trisciuoglio/developer-kit, which has 357 GitHub stars. The repository holds 115 skills in this directory. The repository was last updated on September 10, 2026.

Source: giuseppe-trisciuoglio/developer-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.