Convert local office and document files into Markdown, excluding PDFs. Use when the user asks to convert DOCX, PPTX, XLSX, HTML, CSV, JSON, XML, EPUB, or similar local files into Markdown.

2026-04-130

pdf-to-markdown

mameli/dotfiles

Convert local PDF files into Markdown. Use when the user asks to convert a PDF into Markdown.

2026-04-130

whisper-audio-transcriber

mameli/dotfiles

Use when you need to transcribe a local audio file with whisper-cpp. The skill creates a timestamped folder next to the source audio, copies the original file there, converts it to a Whisper-friendly WAV, and writes a plain-text transcript. Default language is Italian; optionally force English.

2026-04-130

markitdown-file-to-markdown

mameli/dotfiles

Convert local files and office documents into Markdown using Microsoft MarkItDown. Use when the user asks to convert a PDF, DOCX, PPTX, XLSX, HTML, CSV, JSON, XML, EPUB, or similar local file into Markdown, including generic requests to "use MarkItDown" or "convert this document/file to Markdown".

2026-04-090

playwright-cli

mameli/dotfiles

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

2026-04-090

python-antirez-testing

mameli/dotfiles

Design and generate robust tests for Python repos using antirez-style testing: inspect the repo first, prioritize risky public behavior, define invariants and simple oracles, target edge cases and structured randomness, then write pytest tests. Use Hypothesis when it adds value, but do not depend on it.

2026-04-090

name	drawio
description	Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML

Draw.io Diagram Skill

Generate draw.io diagrams as native .drawio files. Optionally export to PNG, SVG, or PDF with the diagram XML embedded (so the exported file remains editable in draw.io).

How to create a diagram

Generate draw.io XML in mxGraphModel format for the requested diagram
Write the XML to a .drawio file in the current working directory using the Write tool
If the user requested an export format (png, svg, pdf), export using the draw.io CLI with --embed-diagram, then delete the source .drawio file
Open the result — the exported file if exported, or the .drawio file otherwise

Choosing the output format

Check the user's request for a format preference. Examples:

/drawio create a flowchart → flowchart.drawio
/drawio png flowchart for login → login-flow.drawio.png
/drawio svg: ER diagram → er-diagram.drawio.svg
/drawio pdf architecture overview → architecture-overview.drawio.pdf

If no format is mentioned, just write the .drawio file and open it in draw.io. The user can always ask to export later.

Supported export formats

Format	Embed XML	Notes
`png`	Yes (`-e`)	Viewable everywhere, editable in draw.io
`svg`	Yes (`-e`)	Scalable, editable in draw.io
`pdf`	Yes (`-e`)	Printable, editable in draw.io
`jpg`	No	Lossy, no embedded XML support

PNG, SVG, and PDF all support --embed-diagram — the exported file contains the full diagram XML, so opening it in draw.io recovers the editable diagram.

draw.io CLI

The draw.io desktop app includes a command-line interface for exporting.

Locating the CLI

Try drawio first (works if on PATH), then fall back to the platform-specific path:

macOS: /Applications/draw.io.app/Contents/MacOS/draw.io
Linux: drawio (typically on PATH via snap/apt/flatpak)
Windows: "C:\Program Files\draw.io\draw.io.exe"

Use which drawio (or where drawio on Windows) to check if it's on PATH before falling back.

Export command

drawio -x -f <format> -e -b 10 -o <output> <input.drawio>

Key flags:

-x / --export: export mode
-f / --format: output format (png, svg, pdf, jpg)
-e / --embed-diagram: embed diagram XML in the output (PNG, SVG, PDF only)
-o / --output: output file path
-b / --border: border width around diagram (default: 0)
-t / --transparent: transparent background (PNG only)
-s / --scale: scale the diagram size
--width / --height: fit into specified dimensions (preserves aspect ratio)
-a / --all-pages: export all pages (PDF only)
-p / --page-index: select a specific page (1-based)

Opening the result

macOS: open <file>
Linux: xdg-open <file>
Windows: start <file>

File naming

Use a descriptive filename based on the diagram content (e.g., login-flow, database-schema)
Use lowercase with hyphens for multi-word names
For export, use double extensions: name.drawio.png, name.drawio.svg, name.drawio.pdf — this signals the file contains embedded diagram XML
After a successful export, delete the intermediate .drawio file — the exported file contains the full diagram

XML format

A .drawio file is native mxGraphModel XML. Always generate XML directly — Mermaid and CSV formats require server-side conversion and cannot be saved as native files.

Basic structure

Every diagram must have this structure:

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Diagram cells go here with parent="1" -->
  </root>
</mxGraphModel>

Cell id="0" is the root layer
Cell id="1" is the default parent layer
All diagram elements use parent="1" unless using multiple layers

Common styles

Rounded rectangle:

<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Diamond (decision):

<mxCell id="3" value="Condition?" style="rhombus;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="80" as="geometry"/>
</mxCell>

Arrow (edge):

<mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="2" target="3" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Labeled arrow:

<mxCell id="5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="3" target="6" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Useful style properties

Property	Values	Use for
`rounded=1`	0 or 1	Rounded corners
`whiteSpace=wrap`	wrap	Text wrapping
`fillColor=#dae8fc`	Hex color	Background color
`strokeColor=#6c8ebf`	Hex color	Border color
`fontColor=#333333`	Hex color	Text color
`shape=cylinder3`	shape name	Database cylinders
`shape=mxgraph.flowchart.document`	shape name	Document shapes
`ellipse`	style keyword	Circles/ovals
`rhombus`	style keyword	Diamonds
`edgeStyle=orthogonalEdgeStyle`	style keyword	Right-angle connectors
`edgeStyle=elbowEdgeStyle`	style keyword	Elbow connectors
`dashed=1`	0 or 1	Dashed lines
`swimlane`	style keyword	Swimlane containers
`group`	style keyword	Invisible container (pointerEvents=0)
`container=1`	0 or 1	Enable container behavior on any shape
`pointerEvents=0`	0 or 1	Prevent container from capturing child connections

Edge routing

CRITICAL: Every edge mxCell must contain a <mxGeometry relative="1" as="geometry" /> child element, even when there are no waypoints. Self-closing edge cells (e.g. <mxCell ... edge="1" ... />) are invalid and will not render correctly. Always use the expanded form:

<mxCell id="e1" edge="1" parent="1" source="a" target="b" style="...">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

draw.io does not have built-in collision detection for edges. Plan layout and routing carefully:

Use edgeStyle=orthogonalEdgeStyle for right-angle connectors (most common)
Space nodes generously — at least 60px apart, prefer 200px horizontal / 120px vertical gaps
Use exitX/exitY and entryX/entryY (values 0–1) to control which side of a node an edge connects to. Spread connections across different sides to prevent overlap
Leave room for arrowheads: The final straight segment of an edge (between the last bend and the target shape, or between the source shape and the first bend) must be long enough to fit the arrowhead. The default arrow size is 6px (configurable via startSize/endSize styles). If the final segment is too short, the arrowhead overlaps the bend and looks broken. Ensure at least 20px of straight segment before the target and after the source when placing waypoints or positioning nodes
When using orthogonalEdgeStyle, the auto-router places bends automatically — if source and target are close together or nearly aligned on one axis, the router may place a bend very close to a shape, leaving no room for the arrow. Fix this by either increasing node spacing or adding explicit waypoints that keep the final segment long enough

Add explicit waypoints when edges would overlap:

<mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="a" target="b">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <mxPoint x="300" y="150"/>
      <mxPoint x="300" y="250"/>
    </Array>
  </mxGeometry>
</mxCell>

Use rounded=1 on edges for cleaner bends
Use jettySize=auto for better port spacing on orthogonal edges
Align all nodes to a grid (multiples of 10)

Containers and groups

For architecture diagrams or any diagram with nested elements, use draw.io's proper parent-child containment — do not just place shapes on top of larger shapes.

How containment works

Set parent="containerId" on child cells. Children use relative coordinates within the container.

Container types

Type	Style	When to use
Group (invisible)	`group;`	No visual border needed, container has no connections. Includes `pointerEvents=0` so child connections are not captured
Swimlane (titled)	`swimlane;startSize=30;`	Container needs a visible title bar/header, or the container itself has connections
Custom container	Add `container=1;pointerEvents=0;` to any shape style	Any shape acting as a container without its own connections

Key rules

Always add pointerEvents=0; to container styles that should not capture connections being rewired between children
Only omit pointerEvents=0 when the container itself needs to be connectable — in that case, use swimlane style which handles this correctly (the client area is transparent for mouse events while the header remains connectable)
Children must set parent="containerId" and use coordinates relative to the container

Example: Architecture container with swimlane

<mxCell id="svc1" value="User Service" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry"/>
</mxCell>
<mxCell id="api1" value="REST API" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="svc1">
  <mxGeometry x="20" y="40" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="db1" value="Database" style="shape=cylinder3;whiteSpace=wrap;" vertex="1" parent="svc1">
  <mxGeometry x="160" y="40" width="120" height="60" as="geometry"/>
</mxCell>

Example: Invisible group container

<mxCell id="grp1" value="" style="group;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry"/>
</mxCell>
<mxCell id="c1" value="Component A" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="grp1">
  <mxGeometry x="10" y="10" width="120" height="60" as="geometry"/>
</mxCell>

Style reference

For the complete draw.io style reference: https://www.drawio.com/doc/faq/drawio-style-reference.html

For the XML Schema Definition (XSD): https://www.drawio.com/assets/mxfile.xsd

CRITICAL: XML well-formedness

NEVER use double hyphens (--) inside XML comments. -- is illegal inside  per the XML spec and causes parse errors. Use single hyphens or rephrase.
Escape special characters in attribute values: &, <, >, "
Always use unique id values for each mxCell