mermaid-alternative

Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams—self-contained HTML with motion and crisp export.

🎬 Open-source animated architecture diagrams as code. Diagram-native DSL, 17 layout engines, Web Animations API, and MCP server for AI agents.

Every diagram a doctor, engineer, or lawyer would actually use. Free. Fully open source. Made for AI. 20 industry-standard diagrams from a text DSL. Pure SVG, zero deps.

Beautiful diagrams, made with your agent.

Interactive data-flow diagrams your AI agent can write. One SKILL.md — install in Claude Code, Cursor, Codex, and 11+ other clients via `npx openskills install naorsabag/openhop`.

Review code 100X faster. Lens draws every PR as animated architecture and data-flow diagrams, inside the pull request itself. Use it as a GitHub App, GitHub Action, CLI, or a skill for your coding agent

AI diagram generator for software architecture - the open-source Eraser.io alternative. Describe your system in plain English, get editable system design, sequence, ERD & cloud diagrams on an Excalidraw canvas. Self-hostable, bring your own key. Vibe diagramming for engineers.

Arcgram — an interactive diagram engine for human–AI collaboration: an AI agent draws its reasoning as an auditable node-and-edge flow and self-audits it, delivered as one standalone HTML file. (Arcgram the AI diagram tool — not Archigram.)

Deterministic geometry diagram DSL for AI agents — text in, precise math figures out (SVG/PNG). Zero-dependency compiler + Claude/Codex/agent skill.

Turn a use case into a grounded agentic system design. An opinionated AI solutions architect as an agent skill.

Hand-drawn diagrams from plain text. 57% fewer tokens than Mermaid.

Tiny, dependency-free SVG diagram engine for system & architecture diagrams. Declarative JSON in, polished SVG out.

Text-first diagram editor with a living DSL — code, canvas, scene tree, and inspector stay in sync. Self-hostable or hosted. AGPL-3.0.

Text-based AV signal flow diagrams (系統図) — port-aware, validating, and it tells you when the wiring is wrong.

Turn a short text description of a system into a polished, self contained, interactive HTML diagram. Pan and zoom, trace what a node reaches, search, dark and light themes, SVG and PNG export. Diagrams as code, zero dependencies.

YAML 1枚から説明図を出す。配置はレイアウトエンジンではなく人（とAI）が決める。スイムレーン・層構造・強調矢印。MCPサーバー同梱。

mermaid second version diagram, which look better and beautiful