statechart-art

SeeCode is an open-source agent skill that turns short JSON specifications written by Claude and other coding agents into animated, explorable diagrams. Its renderers handle layout, edge routing, labels, typography, accessibility and motion rather than requiring the model to write SVG; diagrams can be explored as self-contained HTML files and exported as SVG, PNG, JPEG, GIF or MP4. It supports architecture, flow, sequence, state, data, isometric and chart diagrams, with data loaded from CSV or JSON for charts. SeeCode can import Mermaid, Graphviz, PlantUML, D2, draw.io, Excalidraw, Structurizr, BPMN, SQL, Prisma, DBML, OpenAPI and common data files, and can scan a repository to link diagram nodes to source files. It works with Claude Code, Cursor, Codex, OpenCode, GitHub Copilot and other Agent Skills hosts, requires Node 20 or later for its command-line tooling, and is licensed under the MIT License. The project states that it has no server, accounts or telemetry.

TanStack Charts is a TypeScript visualization grammar for responsive, accessible, server-rendered application charts, built on granular D3 primitives. Chart definitions are framework-independent: marks consume arrays, objects, tuples, or iterables; channels describe visual encodings; and scale factories infer domains from those channels. Definitions compile into a renderer-neutral keyed scene that can be rendered through React, Preact, Vue, Solid, Svelte, Angular, Lit, Alpine, Octane, the vanilla DOM, static SVG, or an optional Canvas renderer. The system supports layered built-in marks, custom marks using the same scene protocol, responsive layout, automatic guide margins, themes, interaction, animation, accessibility, SVG server-side rendering, hydration, and export. Its marks, transforms, layouts, renderers, and chart-owned interactions are available through independent subpaths, with optional D3-backed capabilities remaining tree-shakeable. The repository documents an unreleased alpha line and says the latest published release is 0.16.0; alpha releases may contain breaking changes between minor versions.

Diagram Design is a diagram-generation skill for Claude Code, Codex, Factory Droid, and Pi. It produces self-contained HTML and SVG diagrams through 39 editorial visual types, including architecture, flowchart, sequence, state-machine, data-flow, timeline, Sankey, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, and database-schema diagrams. It can read a website to match its brand, and can redraw draw.io or Mermaid sources at a selected format, size, and detail level. Its semantic system patterns describe behavior separately from layout, so queues, policy traces, and trust boundaries can use an existing diagram type without adding new layout types. The repository supplies each type in minimal-light, minimal-dark, and full-editorial variants. Static HTML is the default; optional accessible motion is available for ordered explanations. The diagrams require no build step, JavaScript, or external image dependency.

An agent skill by caru-ini that turns a natural-language description of a technology stack into an architecture diagram with official logos. It works with Claude Code, Codex, Cursor, and other agents supporting skills, and can depict application infrastructure, development tooling, AI applications, and cloud environments including AWS, Google Cloud, and Azure. The skill fetches logos at build time, routes connector lines around labels, and renders light and dark versions. It produces a self-contained HTML file, PNG, dependency-free React component, or Artifact; PNG export uses Playwright with Chromium. It requires Python 3.9 or later and network access for logo retrieval. The code and documentation are MIT-licensed, while bundled fonts use the SIL Open Font License 1.1.

Hallmark is an open-source design skill for Claude Code, Cursor, and Codex that applies anti-AI-slop rules to generated interfaces. It selects a macrostructure and one of twenty-one themes for a brief, applies its design rule set, runs fifty-seven anti-pattern gates and a pre-emit self-critique, and returns self-contained HTML and CSS. Its four operations build new UI, audit existing code without editing it, redesign an interface while retaining its copy, information architecture, and brand, or study a screenshot or URL to extract macrostructure, type pairing, and a color anchor; the study operation can also emit a portable design.md file. Custom briefs can receive a made-to-measure palette, typography, and layout rather than a catalog theme. Hallmark is made by Together AI and distributed under the MIT license.