creating-diagrams

Generate Mermaid diagrams and convert flowcharts to interactive Excalidraw format.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/meriley/claude-code-skills --skill creating-diagrams
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: creating-diagrams
Source: https://github.com/meriley/claude-code-skills/tree/main/skills/creating-diagrams
Command: npx skills add https://github.com/meriley/claude-code-skills --skill creating-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @excalidraw/mermaid-to-excalidraw, @excalidraw/excalidraw, and includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of technical diagrams by leveraging Mermaid syntax for code-based definitions and optionally converting them into interactive Excalidraw formats for enhanced collaboration and editing.

Core Features & Use Cases

  • Mermaid Diagram Generation: Supports flowcharts, sequence diagrams, ER diagrams, and class diagrams.
  • Excalidraw Conversion: Converts Mermaid diagrams (especially flowcharts) into editable Excalidraw formats.
  • Use Case: You need to document a new microservices architecture. Use this skill to generate a Mermaid flowchart, then convert it to Excalidraw for a collaborative review session with your team.

Quick Start

Generate a Mermaid flowchart for a simple user login process.

Frequently Asked Questions about creating-diagrams

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

FAQPage Schema
How do I convert Mermaid diagrams to Excalidraw format?

You can convert Mermaid diagrams to Excalidraw format by using this skill to generate Mermaid syntax and then transforming it into interactive Excalidraw shapes. It specifically handles flowcharts into native shapes for collaborative editing.

What types of technical diagrams can I generate using Mermaid syntax?

Using Mermaid syntax, you can generate flowcharts, sequence diagrams, ER diagrams, and class diagrams. This skill facilitates code-based definitions for these diagrams and optionally converts them to Excalidraw formats.

Does the Excalidraw conversion support all Mermaid diagram types?

The Excalidraw conversion specifically handles flowcharts into native shapes. While it generates sequence, ER, and class diagrams via Mermaid syntax, the direct conversion to editable Excalidraw shapes is optimized for flowcharts.

What's the best way to document a microservices architecture using Excalidraw?

To document a microservices architecture, generate a Mermaid flowchart defining the services and then convert it to Excalidraw format. This allows your team to collaboratively review and edit the interactive diagram.

Can I use Mermaid syntax to create editable Excalidraw flowcharts?

Yes, you can use Mermaid syntax to create editable Excalidraw flowcharts. This skill leverages the @excalidraw/mermaid-to-excalidraw and @excalidraw/excalidraw libraries to parse your code-based definitions into native shapes.

Why use Mermaid syntax before converting to Excalidraw?

Using Mermaid syntax before converting to Excalidraw streamlines the creation process by allowing code-based definitions. This approach lets you quickly structure technical diagrams before converting them into interactive formats for enhanced collaboration.