What do I need to use Flowchart?

The process; Decision points; Start and end states; Direction preference (optional).

Is Flowchart free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

Flowchart

Q: How do I know the Flowchart output is good?

The skill verifies itself against its own quality checks: Every decision diamond has all its branches labelled and leading somewhere (no dangling paths); There is a clear start and at least one explicit end state; Node shapes are used meaningfully (action vs decision vs start/end); The Mermaid block is syntactically valid and renders without edits.

🔵 Stable🕐 updated 2026-10-06 🔷 SkillSpec L3 pm-visuals

Turn a process, workflow, or decision logic into a clean flowchart. Use when asked to diagram a process, map a workflow, visualize steps/branches, or show 'how this works' as a chart. Produces a ready-to-render Mermaid flowchart (renders live in the playground, exportable as PNG/SVG) plus a short legend and the assumptions made.

▶ Run it free — no key needed 📝 Grade your existing draft ⬇ Add to Claude (works in Duet) 📱 Use as an app View SKILL.md ↗ What changed

🗣 Say this to your agent

“Diagram a process.”“Map a workflow.”“Visualize steps/branches.”“Show 'how this works' as a chart.”

What to give it

▸The process — what happens, roughly in order (steps, who does what).

▸Decision points — where the path branches, and on what condition.

▸Start and end states — where it begins and the possible outcomes (success, rejection, error).

▸Direction preference (optional) — (optional) — top-down (`TD`) for most processes, left-right (`LR`) for pipelines. If the process is ambiguous, state the assumption you made rather than inventing steps.

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓Every decision diamond has all its branches labelled and leading somewhere (no dangling paths)

✓There is a clear start and at least one explicit end state

✓Node shapes are used meaningfully (action vs decision vs start/end)

✓The Mermaid block is syntactically valid and renders without edits

✓Assumptions about ambiguous steps are stated, not silently invented

⚠️ What it refuses to do

Do not produce a linear chain when the real process has branches — capture the decisions

Do not stuff full sentences into nodes — keep labels short, move detail to notes

Do not leave a decision with only one labelled branch — show what happens on every condition

Do not use parentheses or quotes inside labels in a way that breaks Mermaid

Do not invent steps to fill gaps — flag what you assumed

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y -p pm-claude-skills pm-claude-skills-mcp

Example output

Input: Diagram the e-commerce checkout: review cart, enter shipping, choose payment, validate it. If payment is declined, allow up to 3 retries then cancel. If it succeeds, check inventory — in stock: confirm + email receipt; out of stock: refund + notify. Start at Checkout clicked; end states: confirmed, cancelled, refunded. · hand-written example

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="flowchart"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

Flowchart is one of 1326 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog