Can I customize the appearance of the diagrams?

Yes, the skill supports custom styling for nodes, links, and subgraphs, including fill colors, stroke widths, and CSS classes.

Does it support different flowchart directions?

Absolutely. You can specify Top-Down (TD), Bottom-Top (BT), Left-Right (LR), or Right-Left (RL) layouts.

What syntax does this skill use?

It uses Mermaid.js syntax, specifically optimized for flowcharts with support for both legacy and modern metadata-based node definitions.

Can I create nested diagrams?

Yes, the skill includes support for subgraphs to group related logic or components within a larger process.

Mermaid Flowchart Creator

Name: Mermaid Flowchart Creator
Author: hhk7734

byhhk7734

0•

设计工具

Generates and updates professional Mermaid.js flowcharts to visualize complex workflows, algorithms, and decision trees.

This skill empowers Claude to create, refine, and maintain intricate flowcharts using the latest Mermaid.js syntax. It facilitates the visualization of system architectures, business processes, and logic flows by supporting a wide range of node shapes, link styles, and subgraphs. Whether you are documenting a new API lifecycle, mapping out a state transition, or refactoring an existing diagram, this skill ensures consistent formatting and styling for clear technical communication within your codebase.

主要功能

01Flexible directional layouts including Top-Down and Left-Right

02Advanced styling options for nodes, links, and subgraphs

03Multi-line label support with HTML break tags

040 GitHub stars

05Comprehensive shape library including cylinders, diamonds, and stadiums

06Support for modern Mermaid metadata syntax and legacy shapes

使用场景

01Visualizing software architecture and system components

02Documenting state machine transitions and process lifecycles

03Mapping business logic and decision-making workflows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hhk7734/hhk7734 flowchart

For use in Claude.ai and ChatGPT