Does it provide styling or just basic code?

It provides full, styled Mermaid code using class definitions and meaningful colors to indicate different types of nodes, such as success or error states.

What diagram types does the Mermaid skill support?

It supports a wide range of formats including flowcharts, sequence diagrams, class diagrams, state machines, ERDs, Gantt charts, pie charts, git graphs, user journeys, quadrant charts, and timelines.

Can I use this skill to update existing diagrams?

Yes, the skill is designed to refactor and edit existing Mermaid diagrams while preserving the original structure, node IDs, and styling patterns.

How does the skill ensure diagrams are readable?

The skill follows a 'Readability First' approach, limiting nodes to 15-20 per diagram, using subgraphs for organization, and applying consistent spacing and indentation.

How do I trigger the diagram generation?

The skill auto-invokes when you mention keywords like 'visualize', 'flowchart', 'ERD', or 'mermaid', and can also be manually controlled via the /diagram command.

Mermaid Diagram Generator

Name: Mermaid Diagram Generator
Author: joaquimscosta

byjoaquimscosta

•

Aprendizaje y Documentación

Generates and refactors professional Mermaid diagrams to visualize complex system architectures, workflows, and data relationships.

This skill empowers Claude to create high-quality Mermaid diagrams directly within your workflow, supporting a wide array of types including flowcharts, sequence diagrams, and Entity Relationship Diagrams (ERDs). It prioritizes readability and professional aesthetics by applying consistent styling patterns, meaningful color coding, and logical organization through subgraphs. Whether you are documenting an API interaction, mapping a database schema, or visualizing a project timeline, this tool provides complete, render-ready Mermaid code with helpful inline comments for seamless integration into your technical documentation.

Características Principales

01Support for 11+ diagram types including Sequence, ERD, Gantt, and Git Graphs

02Automated styling using class definitions for categories like success and error

03Inline documentation and rendering tips for professional output

041 GitHub stars

05Smart layout optimization using subgraphs and directional control (TB, LR)

06Incremental editing capabilities to maintain existing diagram structures

Casos de Uso

01Mapping database schemas and object-oriented structures for technical design

02Visualizing complex system architectures and API request/response cycles

03Generating project timelines and user journey flows for stakeholder documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add joaquimscosta/arkhe-claude-plugins mermaid

For use in Claude.ai and ChatGPT

Download Skill