# Create Mermaid Flowcharts

Teams often need clear process diagrams but Mermaid syntax can be hard to remember. This skill guides Claude, Codex, and Claude Code to draft valid flowcharts with Mermaid syntax details.

## Install

```bash
npx skillstore add 46ki75/mermaid-flowchart
```

## Metadata

- Status: approved
- Slug: 46ki75-mermaid-flowchart
- Skillstore revision: r1
- Version status: missing
- Tree hash: 080bb95d48df969fce32172505affb60b9e2c0e233a976eab328991667f75f88
- Author: 46ki75
- GitHub username: 46ki75
- License: MIT
- Repository: https://github.com/46ki75/skills/tree/main/public/mermaid-flowchart
- Ref: 14dc8f201a64f8d30fd131d7f036cd5e788be523
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, filesystem
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/46ki75-mermaid-flowchart
- Manifest: https://skillstore.pages.dev/api/skills/46ki75-mermaid-flowchart/manifest

## Capabilities

- Explains Mermaid flowchart node syntax, labels, shapes, and direction settings.
- Shows how to connect nodes with arrows, open links, dotted links, and labeled edges.
- Covers subgraphs, comments, classes, styling, and edge curve options.
- Documents special icon and image node shapes for Mermaid flowcharts.
- Includes guidance for interactive links, callbacks, and tooltip syntax.
- Provides Mermaid examples for common flowchart structures and formatting choices.

## Use Cases

- Document a Workflow: Draft a Mermaid flowchart that shows steps, decisions, and outcomes for a business or engineering process.
- Map Application Logic: Create a readable control-flow diagram for services, jobs, states, or branching behavior in a codebase.
- Improve Existing Diagrams: Refine Mermaid syntax, labels, shapes, and styling so an existing flowchart is clearer and easier to maintain.

## Prompt Templates

### Create a Basic Flowchart

```
Create a Mermaid flowchart for this process: [describe the steps]. Use clear node labels and a top-to-bottom layout.
```

### Add Decisions and Labels

```
Turn this workflow into a Mermaid flowchart with decision nodes and labeled arrows: [workflow details]. Keep labels short.
```

### Refactor an Existing Diagram

```
Review this Mermaid flowchart and improve its structure, labels, direction, and styling without changing the meaning: [paste diagram].
```

### Design a Styled Technical Diagram

```
Create a production-ready Mermaid flowchart for [system or process]. Use subgraphs, consistent shapes, class styling, and notes about Mermaid version requirements.
```

## Limitations

- It is a Markdown reference, not a renderer or diagram validator.
- It does not install Mermaid or run Mermaid CLI commands.
- Some examples depend on Mermaid version support in the target environment.
- Interactive callbacks and external links need separate security review before production use.

## Best Practices

- Use short node labels and explain complex details outside the diagram.
- Choose one main flow direction and keep branch labels consistent.
- Check Mermaid version support before using newer shapes, icons, or renderer options.

## Anti Patterns

- Do not place large paragraphs inside flowchart nodes.
- Do not mix many shape meanings without a legend or clear convention.
- Do not enable interactive callbacks for untrusted diagrams without security review.

## Security Audit

- Audited at: 2026-07-04T17:40:29.238\+00:00
- Summary: The static findings are false positives caused by Markdown code fences, inline backticks, sample URLs, and relative documentation links in a Mermaid syntax reference. No executable scripts, automatic network access, filesystem operations, or prompt injection instructions were found in SKILL.md.

## Stats

- Views: 404
- Downloads: 28
- Favorites: 0
- Popularity score: 0