workflowstacks
ai-agent

Mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
89,817 stars9,182 forksTypeScriptUpdated 8/18/2026100% free · open source
What it does

Turns plain‑text diagram definitions into SVG/PNG flowcharts, sequence diagrams, Gantt charts, etc., using a simple markdown‑like syntax.

When to use it
  • •You need a quick, version‑controlled diagram for product specs, roadmaps, or architecture docs.
  • •You want to generate images automatically in CI pipelines (e.g., docs build, release notes).
  • •Your team collaborates in Markdown (GitHub, Notion) and prefers a text‑based source over drag‑and‑drop tools.
Ready-to-paste prompt
`mmdc -i user‑journey.mmd -o user‑journey.png --width 1200 --backgroundColor transparent`
Heads up: The CLI relies on a headless Chromium (via puppeteer); on Linux you may need additional OS packages (e.g., `apt-get install -y libgbm-dev libasound2`) or use the `--puppeteerConfigFile` option to point to a custom Chrome executable.
Saves to your device
Use with Claude
New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup✓ Install verified 9/7/2026

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install
Claude Code
mkdir -p ~/.claude/skills/mermaid && curl -fsSL https://workflowstacks.com/api/skills/mermaid/claude-skill -o ~/.claude/skills/mermaid/SKILL.md
Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)
claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Mermaid works
Codeflow
Free to inspect

Mermaid is a very large TypeScript project (~158k lines across 969 code files, plus 49 test files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, MIT license, has a test suite.

Size
Very large codebase
~158k lines · 969 code files · days to read — use, don't read
Setup
Developer setup
A real software project. Use it via its install path; don't expect to read it all.
Runs on
Node.js · Docker
No API keys detected
TypeScript 53%JavaScript 22%Mermaid 18%HTML 5%Yacc 2%
Where to start reading
  1. 1
    README.md
    Start here — what it does and how to install it
  2. 2
    package.json
    Dependencies and the commands it exposes
  3. 3
    demos/architecture.html
    A worked example — copy this to get going
What's in each folder
packages/Sub-packages / plugins1090 files
docs/Documentation154 files
demos/Examples you can copy39 files
cypress/Folder395 files
scripts/Helper scripts16 files
patches/Patches1 files
.github/CI / automation (GitHub Actions)35 files
.changeset/Tool / agent settings26 files
READMEHas testsDocumentedCI checksDocker readyExamples includedMIT licenseUpdated this month
Quick Actions
Details
Creator
mermaid-js
Language
TypeScript
Category
ai-agent
Published
11/1/2014

Are you the creator of this tool? Claim your listing → and earn 85% of every sale.

Related skills

More ai-agent tools founders pair with this one.

ai-agent★ 276,806
Track GitHub Stars with 996.ICU
Get a popular GitHub star counter for your startup, ideal.
ai-agent★ 264,191
Superpowers
An agentic skills framework & software development methodology that works.
ai-agent★ 244,424
Linux: Open Source Kernel
Get the Linux kernel source tree for custom development, ideal for startup founders in need of a flexible OS foundation
ai-agent★ 210,750
Vue
This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
ai-agent★ 204,069
Improve Code with andrej-karpathy-skills
Get better code behavior with andrej-karpathy-skills, 165k+ GitHub stars, for founders using LLMs.
ai-agent★ 197,010
FreeDomain: Free Website Domain
Get a free domain with FreeDomain.