analytics

Diagram Design

Name: Diagram Design
Author: cathrynlavery

38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.

27,838 stars1,723 forksHTMLUpdated 8/27/2026100% free · open source

What it does

Creates 29 types of self-contained editorial diagrams using HTML and SVG, compatible with Claude Code, without shadows or Mermaid sloppiness

When to use it

•When a startup needs to create consistent, high-quality diagrams for their blog or documentation
•When creating diagrams that require precise control over the layout and design
•When integrating diagrams into a larger web application or site, and need self-contained HTML and SVG

Ready-to-paste prompt

To create a simple flowchart, copy the HTML and SVG code for the `flowchart` diagram type and customize the nodes and edges to fit your needs

Heads up: Make sure to keep the cloned repository up-to-date, as changes to the diagram types or code may break compatibility with older versions

Saves to your device

Use with Claude

New

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

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

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

Codeflow

Free to inspect

Diagram Design is a large HTML project (~24k lines across 47 code files). You install it into your AI tool with one command; there is nothing to run yourself. Last commit this month, MIT license, has a test suite.

Size

Large codebase

~24k lines · 47 code files · ~3 h to skim

Setup

Install as a skill / plugin

Add it to Claude Code (or your AI tool) with one command — 1 skill inside. Nothing to run yourself.

Runs on

Inside your AI tool

Nothing to install on your machine

HTML 69%Python 31%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
skills/diagram-design/SKILL.md
Inside skills/ — an example of what the AI is told to do

What's in each folder

skills/Prompts, skills & agent definitions206 files

commands/Prompts, skills & agent definitions5 files

prompts/Prompts, skills & agent definitions4 files

docs/Documentation52 files

scripts/Helper scripts49 files

.claude-plugin/Plugin manifest — what gets installed2 files

.factory-plugin/Plugin manifest — what gets installed2 files

.codex-plugin/Plugin manifest — what gets installed1 files

READMEHas testsDocumentedCI checksMIT licenseUpdated this month

Use with Claude

New

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

⚡ Runs out of the box

A prompt/skill package — nothing to install beyond adding it to your AI tool.

Try it instantly — no install

Claude Code

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

cathrynlavery

Language

HTML