skills.rest
vladm3105
vladm3105COMMUNITY
Explore all skills by this author →
GitHub

charts_flow

Generate Mermaid architecture diagrams and embed SVG previews in technical documents.

16|3|Updated Nov 10, 2025
Search Tags:#architecture#documentation#flowchart#visualization#Mermaid#SVG#diagrams#sequence diagram
One-click install
npx skills add https://github.com/vladm3105/aidoc-flow-framework --skill charts-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: charts_flow
Source: https://github.com/vladm3105/aidoc-flow-framework/tree/main/.claude/skills/charts_flow
Command: npx skills add https://github.com/vladm3105/aidoc-flow-framework --skill charts-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, puppeteer (alternative).

What problem does it solve?

This Skill automates the creation and management of Mermaid architecture diagrams, separating them from main documents for performance, generating SVG previews, and maintaining traceability, streamlining technical documentation.

Core Features & Use Cases

  • Diagram Creation & Management: Generate flowcharts, sequence, class, state, component, and deployment diagrams from templates, organized in dedicated subfolders.
  • Automatic SVG Generation: Convert Mermaid source files into SVG for human viewing, with Base64 embedding in parent documents for seamless integration.
  • Diagram Migration: Extract existing inline Mermaid diagrams from documents into separate, managed files, improving document load times and maintainability.
  • Use Case: Create a new system architecture flowchart for a Product Requirements Document (PRD), automatically generating the Mermaid file, converting it to an SVG, and embedding a preview in the PRD, while maintaining a clean document structure and traceability.

Quick Start

Use the charts_flow skill to create a flowchart diagram showing the user workflow for 'BRD-001_trading_requirements.md'.

Frequently Asked Questions about charts_flow

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

FAQPage Schema
How do I automate Mermaid diagram creation for technical documentation?▼

Automate Mermaid diagram creation by parsing your document, generating Mermaid source files in organized subfolders, rendering them to SVG via mermaid-cli or puppeteer, and embedding Base64-encoded previews in your parent document with proper cross-references.

Can I convert existing inline Mermaid diagrams into separate managed files?▼

Yes, migrate inline Mermaid diagrams by extracting them from documents into dedicated subfolder files, which improves load times, maintainability, and enables diagram reuse across multiple documents while maintaining traceability.

What diagram types does Mermaid support for architecture documentation?▼

Mermaid supports flowcharts, sequence diagrams, class diagrams, state machines, component diagrams, and deployment diagrams—all applicable to PRDs, BRDs, ADRs, and system architecture documents.

How do I embed SVG diagram previews directly in documentation?▼

Generate SVG files from Mermaid source, encode them as Base64 data URIs, and embed them in your parent document with proper Document Control metadata to maintain clean structure and seamless integration.

Does this work for complex diagrams like sequence and deployment architectures?▼

Yes, the Skill handles complex diagrams including sequence diagrams, deployment diagrams, and multi-component flowcharts, with automatic rendering and embedding across architecture documents.

Related Skills

Explore More Design & Creative Skills→
sunLeeesunLeee

doc-workflow

Generate and maintain project documentation across PRD, BRD, ADR, Spec, Sys, and Tasks.

Community
Advanced
SwimmingLiuSwimmingLiu
1

drawio

Generate editable draw.io diagrams and export them to PNG, SVG, or PDF.

Community
Intermediate
adampetrovicadampetrovic
2

mermaid

Validate and render Mermaid diagrams from .mmd files to SVG and ASCII.

Community
Intermediate
shekerkammashekerkamma

diagram-export

Convert Mermaid, PlantUML, Graphviz, draw.io, and Vega diagrams to PNG/SVG/PDF.

Community
Intermediate