ai-agent

Js Sequence Diagrams

Name: Js Sequence Diagrams
Author: bramp

Draws simple SVG sequence diagrams from textual representation of the diagram

7,832 stars1,073 forksJavaScriptUpdated 9/21/2022100% free · open source

What it does

js-sequence-diagrams draws simple SVG sequence diagrams from a textual representation of the diagram, allowing for easy creation and visualization of sequence diagrams

When to use it

•When you need to create a sequence diagram for a technical discussion or documentation
•When you want to visualize the flow of a system or process
•When you need to create a diagram to explain a complex system or architecture to a non-technical audience

Ready-to-paste prompt

var diagram = Diagram(`participant Alice
participant Bob
Alice->>Bob: Hello
Bob->>Alice: Hi`); var svg = diagram.render(); console.log(svg);

Heads up: The `Diagram` function expects a multiline string as input, so make sure to use backticks (``) to define the diagram text, and be aware that the library uses a specific syntax for defining participants, messages, and other diagram elements

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/js-sequence-diagrams && curl -fsSL https://workflowstacks.com/api/skills/js-sequence-diagrams/claude-skill -o ~/.claude/skills/js-sequence-diagrams/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 Js Sequence Diagrams works

Codeflow

Free to inspect

Js Sequence Diagrams is a medium JavaScript project (~7.1k lines across 11 code files, plus 4 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 48 months ago, BSD-2-Clause license, has a test suite.

Size

Medium codebase

~7.1k lines · 11 code files · 59 min skim

Setup

One-command install

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

Runs on

Node.js

No API keys detected

JavaScript 65%HTML 31%CSS 3%Makefile 1%Yacc 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
src/main.js
Where the program starts running
3
package.json
Dependencies and the commands it exposes

What's in each folder

src/Core code — the actual logic10 files

fonts/Images & static assets23 files

test/Tests — proof it works9 files

READMEHas testsDocumentedCI checksBSD-2-Clause licenseLast update 48 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/js-sequence-diagrams && curl -fsSL https://workflowstacks.com/api/skills/js-sequence-diagrams/claude-skill -o ~/.claude/skills/js-sequence-diagrams/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

bramp

Language

JavaScript