How does the skill add diagrams to my project files?

Once you approve a generated diagram, the skill uses automated editing tools to insert the Mermaid code block into the appropriate markdown or architecture file in your repository.

What types of diagrams can this skill generate?

It supports a wide variety of visualizations including Flowcharts, Service Relationship graphs, Entity-Relationship Diagrams (ERDs), Sequence diagrams, and State diagrams using Mermaid.js syntax.

Can I use this for non-Drupal projects?

Absolutely. While the skill includes specific templates for Drupal-based development, the core generator is framework-agnostic and can visualize any software architecture or logic flow.

Do I need to know Mermaid syntax to use this?

No knowledge of Mermaid syntax is required. The skill handles all the code generation based on your answers to simple questions about your system's components and their connections.

Mermaid Diagram Generator

Name: Mermaid Diagram Generator
Author: camoa

bycamoa

•

学习与文档

Generates professional Mermaid.js diagrams to visualize system architecture, data flows, and entity relationships within your documentation.

The Mermaid Diagram Generator skill streamlines the creation of technical documentation by translating complex system descriptions into clear, interactive visualizations. Designed to assist developers in mapping out software logic, this tool supports multiple diagram types including flowcharts, sequence diagrams, and entity-relationship models. It guides users through a structured discovery process to gather system components and dependencies, automatically generating precise Mermaid code that can be instantly integrated into project architecture files. While optimized for general software design, it includes specialized templates for Drupal request flows and plugin systems, making it an essential utility for maintaining living documentation.

主要功能

0117 GitHub stars

02Interactive discovery workflow to identify system nodes and relationships

03Live preview and refinement process for visual accuracy

04Generates Flowcharts, Sequence, ERD, and State diagrams using Mermaid.js

05Automated integration of diagrams into project architecture markdown files

06Includes specialized templates for Drupal architecture and request flows

使用场景

01Visualizing complex service dependencies and data flows in a backend system

02Mapping the lifecycle of custom plugins or state-dependent entities

03Documenting database schemas and entity relationships for team onboarding

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add camoa/claude-skills diagram-generator

For use in Claude.ai and ChatGPT

Download Skill