kylecui/petfish.ai/drawio-course-diagrams

Purpose

Create or revise diagrams intended for draw.io/diagrams.net usage in course projects.

Activation cues

Use this skill when the user asks to:

• draw a course structure
• create a module map
• visualize a workflow or lifecycle
• prepare a lab topology
• convert an architecture explanation into a diagram
• revise an existing draw.io concept or page layout

Working method

1. Identify the diagram type:

• hierarchy
• flow
• timeline
• topology
• matrix
• swimlane

1. Define the nodes, groups, and relationships in text first.
2. Produce one of:

• a draw.io page plan
• a node-and-edge specification
• a Mermaid or ASCII intermediate draft if that helps alignment
• draw.io XML only when the user explicitly wants machine-ready content

1. Keep labels short and presentation-safe.

Diagram design rules

• One page, one main message.
• Use left-to-right for flow, top-to-bottom for hierarchy unless there is a strong reason otherwise.
• Separate permanent architecture from transient process.
• Distinguish actor, artifact, system, and decision node.
• For training diagrams, prefer readability over technical density.

Output options

Depending on the request, produce:

• a draw.io editing plan
• a detailed layout specification
• a Mermaid draft for quick review
• final draw.io XML skeleton
• annotation notes for a human to finish in draw.io

Gotchas

• Do not dump raw XML unless the user actually needs import-ready content.
• Do not overload one page with both lesson structure and system architecture unless the user asks.
• Do not use ambiguous arrows; define direction and meaning.
• Do not make learners reverse-engineer the teaching logic from a messy visual.

See:

• assets/diagram-patterns.md
• assets/drawio-page-template.md