repowisecathrynlavery/diagram-design

cathrynlavery / diagram-design

29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.

HTML★ 43,640
Use in your agentAsk this codebase

github.com/cathrynlavery/diagram-designIndexed at 09df49dUp to date with upstream

What is diagram-design?

diagram-design is a diagram-generation skill for Claude Code, Codex, and Pi. It creates editorial diagrams as self-contained HTML and SVG, using semantic patterns separately from visual layout. The project is primarily HTML, with Python files also present.

Written by a model from the README and the source

197 files and 422 symbols in 2 modules, written in Python.

Start reading

Code health

5.7out of 10Fair

This codebase scores 5.7 out of 10 for code health, which we rate fair. It also scores maintainability 7.6 and static performance 9.2 out of 10. The three are scored separately and never blended into one number. Risk is concentrated, as it usually is: 4 of 197 files are git hotspots, and they average 3.9 — which is where the fixes pay off most.

Full health report

Use cathrynlavery/diagram-design in your agent

Point Claude Code, Cursor, Codex or VS Code at this repository. Your agent gets the index this page is built from: cited answers, callers, history and health for any file.

  1. 1.In Claude, open Customize → Connectors, click +, then Add custom connector. On a Team or Enterprise plan an owner adds it first under Organization settings → Connectors.
  2. 2.Paste the server URL below as the Remote MCP server URL, then click Add.
  3. 3.Click Connect. A Repowise sign-in window opens. Approve access.
  4. 4.Repowise's tools are now available in your Claude chats.

Connect with one click. Sign in with Repowise (OAuth), no API key to copy. Works in Claude on the web, desktop, and mobile.

Docs
bash
https://api.repowise.dev/mcp/cathrynlavery/diagram-design
Editors need an API key: sign in to create one.Sign in to connect

This repo is public, so anyone with a Repowise account and an API key can connect.

Try asking

  • get_overview()
  • get_answer("how is diagram-design put together?")
  • get_why("why is diagram-design structured this way?")

Explore diagram-design

Key features of diagram-design

  • diagram-design provides 27 visual types, including architecture diagrams, flowcharts, sequence diagrams, state machines, timelines, and data-flow diagrams.
  • diagram-design ships each visual type in minimal light, minimal dark, and full-editorial static variants.
  • diagram-design uses semantic system patterns to describe behavior separately from layout.
  • diagram-design supports optional motion for ordered explanations while keeping static output as the default.

How cathrynlavery/diagram-design works

Input enters through the shared skill in skills/diagram-design/, which agent-compatible tools use for diagram requests. The skill selects a visual type and applies a style guide to produce static HTML and SVG output. The assets/index.html gallery lets users open the diagram variants directly in a browser. The scripts/mermaid_extract.py file extracts Mermaid sources for redraw workflows. The scripts/lint-skin.py and scripts/test-lint-a11y.py files support style and accessibility checks. The scripts/verify-mermaid-import.py file verifies Mermaid imports.

The codebase has 197 files and 422 symbols in 2 modules, led by Python. Code health is 5.7 out of 10, rated fair.

Getting started with diagram-design

  1. Install the diagram-design plugin for Claude Code.
    /plugin marketplace add cathrynlavery/diagram-design
  2. Install the diagram-design plugin in Claude Code.
    /plugin install diagram-design@diagram-design
  3. Install diagram-design for Codex.
    codex plugin marketplace add cathrynlavery/diagram-design

Commands copied from the README

cathrynlavery/diagram-design FAQ

What is diagram-design?

diagram-design is a diagram-generation skill for Claude Code, Codex, and Pi. It produces self-contained HTML and SVG diagrams using editorial visual types.

How does diagram-design work?

diagram-design selects a visual type and applies semantic patterns and a style guide to generate static HTML and SVG. Its shared skill is stored in skills/diagram-design/.

How do I install diagram-design?

Install diagram-design with the Claude Code, Codex, or Pi commands provided for each tool. Claude Code uses its plugin marketplace, Codex uses its plugin commands, and Pi uses pi install.

What language is diagram-design written in?

diagram-design is primarily written in HTML, with Python files also present. Its output uses HTML and SVG.

How is the diagram-design code organized?

diagram-design stores the shared skill in skills/diagram-design/, supporting scripts in scripts/, and plugin configuration in .claude-plugin/ and .codex-plugin/. The assets/index.html file provides the local gallery.

Who is diagram-design for?

diagram-design is for Claude Code, Codex, and Pi users who need editorial diagrams such as architecture sketches, flowcharts, and data-flow diagrams.

What license does diagram-design use?

diagram-design uses the MIT license.

The summary, features and answers on this page are written by a model from the README and the source, and refreshed with each index.

About this page

Get a page like this for your own codebase

Repowise built this map of cathrynlavery/diagram-design from its source and git history. It parses every symbol, draws the dependency graph, scores each file's health from complexity, duplication, coverage and churn, finds hotspots and owners in the history, and writes documentation for every module. Your coding agent reads the same index over MCP, so its answers cite real files.

Index your repo freeSee how Repowise worksFree for 2 public repos, with a page like this one.

Prefer local? pip install repowise && repowise init indexes your own checkout, no account needed.