ai-agent

SVG Sequence Diagram

Name: SVG Sequence Diagram
Author: sullerandras

Realtime SVG Sequence Diagram Drawer With AngularJS

107 stars30 forksJavaScriptUpdated 6/7/2014100% free · open source

What it does

Creates interactive, real-time sequence diagrams using SVG and AngularJS, allowing for dynamic and customizable visualizations of system interactions

When to use it

•When you need to visualize complex system interactions in a simple and intuitive way
•When you want to create interactive diagrams that can be modified in real-time
•When you're working with AngularJS and need a tool to create custom sequence diagrams

Ready-to-paste prompt

Create a sequence diagram with two participants and one message using the following code: `<sequence-diagram participants('[{name: "Alice"}, {name: "Bob"}]') messages('[{from: "Alice", to: "Bob", message: "Hello"}]')></sequence-diagram>`

Heads up: Make sure you have AngularJS included in your project, as the SVG Sequence Diagram tool relies on it to function correctly, and ensure that the `sequence-diagram` directive is properly registered in your AngularJS module

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/svg-sequence-diagram && curl -fsSL https://workflowstacks.com/api/skills/svg-sequence-diagram/claude-skill -o ~/.claude/skills/svg-sequence-diagram/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.

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/svg-sequence-diagram && curl -fsSL https://workflowstacks.com/api/skills/svg-sequence-diagram/claude-skill -o ~/.claude/skills/svg-sequence-diagram/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

sullerandras

Language

JavaScript