diagram

Generate flowcharts, ER diagrams, and mind maps from natural-language prompts.

109|17|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/312362115/claude --skill diagram-312362115
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/312362115/claude/tree/main/skills/diagram
Command: npx skills add https://github.com/312362115/claude --skill diagram-312362115

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Diagram Skill automates the creation of professional diagrams from natural-language prompts, replacing manual drawing and reducing iteration time.

Core Features & Use Cases

  • Supports multiple diagram types (flowcharts, ER diagrams, architecture diagrams, mind maps, Gantt charts, etc.) and outputs PNG/HTML/Mermaid DSL.
  • Enforces a consistent design system across charts (colors, typography, spacing) and renders via HTML/SVG templates.
  • Use cases include architecture planning, data pipelines, system diagrams, and research diagrams embedded in Markdown documents.

Quick Start

Generate a simple user registration flow diagram and export it as PNG.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I generate diagrams from natural language prompts automatically?

Mermaid DSL is a Domain Specific Language for defining charts as text. This Skill uses Mermaid DSL to enable reproducible, offline diagram rendering, outputting self-contained HTML or PNG files while enforcing a unified design system.

Can I export architecture diagrams as PNG or HTML for Markdown embedding?

Yes, you can export architecture diagrams as PNG or HTML. The pipeline renders self-contained HTML or PNG outputs through an offline process, ensuring charts are ready for direct embedding into Markdown documents.

Do I need Playwright installed to render SVG charts offline?

Yes, Playwright is required as a dependency to render SVG charts and export PNG files. The automated layout engine and rendering pipeline rely on Playwright to produce reproducible, offline outputs.

What is the best way to enforce a consistent design system across multiple flowcharts?

The best way to enforce a consistent design system across flowcharts is to use automated HTML/SVG templates. This Skill enforces unified colors, typography, and spacing across all generated diagrams, ensuring visual consistency.

Does this automated diagram tool support ELKjs for automated layout?

Yes, this automated diagram tool uses ELKjs for automated layout where applicable. The layout engine automatically arranges elements in complex diagrams like flowcharts and architecture charts to ensure professional readability.