diagram

Convert English descriptions or mermaid source into SVG, PNG, and excalidraw files.

Updated Jul 21, 2025
One-click install
npx skills add https://github.com/robertzengcn/aiFetchly --skill diagram-robertzengcn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/robertzengcn/aiFetchly/tree/main/.claude/skills/gstack/diagram
Command: npx skills add https://github.com/robertzengcn/aiFetchly --skill diagram-robertzengcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating professional diagrams manually is slow and often requires switching between multiple tools. This Skill transforms plain English descriptions or mermaid source code into polished, editable diagrams in seconds, eliminating the friction from visualization workflows.

Core Features & Use Cases

  • Text-to-Diagram Generation: Convert natural language descriptions into architecture diagrams, flowcharts, and system designs without manual drawing.
  • Mermaid Source Support: Feed existing mermaid code to generate clean, styled diagrams with consistent formatting.
  • Editable Output: Receive a .excalidraw file for hand-drawn aesthetic edits alongside clean SVG and PNG renders.
  • Use Case: A developer describing a microservices architecture can generate a complete, editable diagram from a paragraph of text to include in documentation.

Quick Start

Use the diagram skill to create an architecture diagram showing a user authenticating through OAuth and accessing a protected REST API endpoint.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I convert plain text descriptions into architecture diagrams and flowcharts?

You can convert natural language descriptions into architecture diagrams by using the diagram Skill, which transforms plain text into mermaid source files, editable excalidraw documents, and rendered SVG or PNG image artifacts for documentation.

Can I generate editable Excalidraw files from existing mermaid source code?

Yes, you can generate editable Excalidraw files from existing mermaid source code. The Skill processes the mermaid input and outputs a hand-drawn aesthetic .excalidraw document alongside standard SVG and PNG image renders.

Do I need the gstack tooling to render mermaid diagrams into SVG and PNG images?

Yes, gstack tooling is required to render mermaid diagrams into the complete triplet output format. It enables the generation of the source files, editable Excalidraw documents, and rendered SVG and PNG images.

What is the best way to automate system design visualization for offline documentation workflows?

The best way to automate system design visualization for offline documentation is converting descriptions or mermaid code into diagram artifacts. This Skill executes offline to generate clean source files and rendered images without manual drawing.

Does the diagram generation support microservices architecture documentation?

Yes, diagram generation supports microservices architecture documentation. You can describe user authentication flows and protected REST API endpoints in a paragraph of text to generate complete, editable diagrams for your docs.

What are the limitations of using natural language for flowchart creation?

A limitation of using natural language for flowchart creation is that outputs rely on clean, mermaid-style rendering and require gstack tooling. Complex or ambiguous descriptions may need manual refinement in the generated Excalidraw file.