ai-agent

SequenceDiagram

Name: SequenceDiagram
Author: davidje13

Javascript tool for generating sequence diagrams from code

133 stars42 forksJavaScriptUpdated 7/28/2026100% free · open source

What it does

SequenceDiagram generates sequence diagrams from code, visualizing the flow of interactions between objects and methods in a clear and concise manner

When to use it

•When you need to document complex interactions between microservices or modules
•When debugging issues that involve multiple asynchronous calls or callbacks
•When communicating system design or architecture to team members or stakeholders

Ready-to-paste prompt

const diagram = new SequenceDiagram('Order Processing'); diagram.participant('Customer'); diagram.participant('Shop'); diagram.message('Order', 'Customer', 'Shop'); diagram.generateImage('order_processing.png');

Heads up: Make sure to have Graphviz installed on your system, as SequenceDiagram relies on it to generate the sequence diagram images, and you may need to configure the `GRAPHVIZ_DOT` environment variable to point to the Graphviz executable

Saves to your device

Use with Claude

New

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

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/sequencediagram && curl -fsSL https://workflowstacks.com/api/skills/sequencediagram/claude-skill -o ~/.claude/skills/sequencediagram/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 SequenceDiagram works

Codeflow

Free to inspect

SequenceDiagram is a large JavaScript project (~30k lines across 104 code files, plus 19 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit a month ago, LGPL-3.0 license, has a test suite.

Size

Large codebase

~30k lines · 104 code files · ~4 h to skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

JavaScript 95%HTML 3%CSS 2%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
bin/svg-sequence-diagram.mjs
Where the program starts running
3
package.json
Dependencies and the commands it exposes
4
lib/sequence-diagram-web.js
Inside lib/ — the main logic begins here

What's in each folder

lib/Core code — the actual logic4 files

web/Frontend / UI38 files

bin/Command-line entry points1 files

docs/Documentation4 files

scripts/Helper scripts73 files

fonts-raw/Folder19 files

screenshots/Folder15 files

dev-bin/Folder2 files

READMEHas testsDocumentedCI checksLGPL-3.0 licenseUpdated 1 mo ago

Use with Claude

New

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

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/sequencediagram && curl -fsSL https://workflowstacks.com/api/skills/sequencediagram/claude-skill -o ~/.claude/skills/sequencediagram/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.

Quick Actions

Details

Creator

davidje13

Language

JavaScript