diagram

Creates and converts diagrams using Mermaid or DrawIO based on complexity.

1|Updated May 20, 2025
One-click install
npx skills add https://github.com/timblaktu/nixcfg --skill diagram-timblaktu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/timblaktu/nixcfg/tree/main/home/modules/claude-code/skills/diagram
Command: npx skills add https://github.com/timblaktu/nixcfg --skill diagram-timblaktu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of rapidly creating and converting diagrams across formats, enabling teams to visualize architectures and workflows without manual formatting toil.

Core Features & Use Cases

  • Automatic format selection: Mermaid for simple diagrams and DrawIO for complex diagrams.
  • Multi-format input/output: Accepts .drawio, .drawio.svg, Mermaid, and ASCII inputs and exports to SVG or ASCII representations.
  • Use cases: Architecture diagrams, flowcharts, and visualizations for design reviews, project planning, and onboarding.

Quick Start

Start by providing a simple Mermaid diagram to render quickly, e.g., A -> B -> C. For complex diagrams, create a .drawio.svg or .drawio file and render with the included renderer, then export to SVG. You can also convert between Mermaid and DrawIO formats to compare layouts.

Frequently Asked Questions about diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a Mermaid diagram to DrawIO format?

Render an architecture diagram by providing Mermaid syntax for simple structures or a .drawio file for complex layouts. The skill automatically selects the appropriate format and exports the final visualization to SVG.

Can I use ASCII art as input to generate a flowchart?

Yes, ASCII is fully supported as an input format to generate and refine flowcharts. The skill processes ASCII text alongside .drawio and Mermaid inputs to produce visual diagram outputs.

When should I use Mermaid vs DrawIO for architecture diagrams?

Use Mermaid for simple architecture diagrams and DrawIO for complex ones. The skill automatically selects the appropriate renderer based on diagram complexity to optimize layout and visualization.

What is the best way to export a DrawIO diagram to SVG?

Export a DrawIO diagram to SVG by loading your .drawio or .drawio.svg file and running the included rendering workflow. This executes the layout computation and format conversion to produce the SVG output.

Does this diagram tool require any external dependencies?

No external dependencies are required to use this diagram creation and conversion tool. It operates using embedded frontmatter metadata and an optional rendering workflow to handle layout, format conversion, and export.