About this skill

Problem

Engineers often need to visualize workflows, API calls, database models, and system components while writing design docs, review notes, or incident writeups. Prose can be ambiguous, and pasted screenshots are hard to version. This skill turns diagram requirements into maintainable text-based diagrams that fit in Markdown, GitHub docs, review materials, and development tools.

How It Works

It starts by clarifying the subject, diagram type, level of detail, and audience, then selects Mermaid, PlantUML, ASCII, or D2 based on the target environment. It covers flowchart, sequence diagram, architecture diagram, ER diagram, class diagram, state diagrams, Gantt charts, mind maps, and Git graphs. The output is typically renderable code that can be pasted into a renderer, with optional theme, direction, grouping, and color hints.

Boundaries

It does not generate raster images and cannot guarantee pixel-perfect layout. Complex diagrams may need manual adjustment, and styling is more limited than professional design tools. Some diagram types are not supported by every renderer, so the target renderer should be checked before use.

Screenshots

Use Cases

Create a Mermaid sequence diagram for API request flow and timeout retries during service review.
Use an ER diagram to map user, order, and payment tables with key relationships for a data model.
Draw a state diagram to show order lifecycle transitions from pending payment to canceled.
Use PlantUML components to describe gateway, service, and cache dependencies in an architecture doc.

Best For

Engineers writing design docs who need service dependencies and data models as maintainable text diagrams.
Backend engineers joining API reviews who need sequence diagrams for call chains and error paths.
Technical writers maintaining project docs who need business workflows converted into Mermaid flowcharts.
Engineering managers planning releases who need Gantt charts to organize task milestones.