How is this different from Mermaid?

Mermaid shines for minimal engineering flows. sketch-infographic outputs whiteboard-style SVG — topology boxes when needed, plus circles, stacks, and custom glyphs for "what it looks like", with code you can tweak and commit.

Why not Excalidraw or an image model?

Those often look great on the first pass, then struggle with local edits and custom business objects. Code → SVG means local re-renders, version control, and no repeated image-model spend for small tweaks.

How do I install and use it?

Install with: npx skills add morvanzhou/sketch-infographic. Then ask your Agent to draw a diagram. For long-lived figures, keep the script in the repo and re-render with node render.mjs (SVG or PNG).

Not for large-scale data exploration, interactive charts, or photo-level covers. If your team only needs minimal Mermaid flows and already standardizes on them, no need to switch. Best for research, teaching, architecture, and stakeholder structure diagrams.

AI Skills

Sketch Infographic · Hand-drawn Diagrams from Code

Presentation diagrams shouldn't force a choice between pretty-but-uneditable and editable-but-dry. sketch-infographic is an Agent Skill that generates whiteboard-style SVGs you can tweak, version in Git, and extend with custom shapes.

GitHub MIT Open Source License

A False Choice

Three paths for presentation diagrams: pretty but hard to edit, editable but dry, and code-generated hand-drawn sketches

Pretty, hard to edit

Whiteboard tools and image models look great on v1 — then one change often means redrawing everything, with weak custom business glyphs.

Editable, dry

Mermaid is versionable and doc-friendly, but visually sparse — fine for engineers, weak for presentations or non-technical audiences.

A Third Path

Presentation diagrams shouldn't force pretty-but-uneditable vs editable-but-dry. Hand-drawn look, code maintainability, AI scaffolding, and local tweaks can coexist.

What You Actually Need

Not a topology wall

Whiteboard sketch style that non-technical colleagues can grasp at a glance.

Tweak without redraw

Move labels and nodes by editing a few coordinates — local re-render, no token burn.

Draw what it looks like

Packages, people, layered morphs — not just Box1 → Box2.

Key Features

Hand-drawn SVG

Whiteboard sketch look for talks, teaching, and cross-functional communication.

Code you can maintain

Diagrams are JavaScript — tweakable, diffable, and Git-friendly.

Custom shapes

Circles, stacks, paths, svgGlyph; Lucide built-in, or let AI draw business objects.

AI skeleton, local iterate

AI ships v1; daily tweaks re-render locally — no repeated image-model calls.

Workflow

From spoken request to Agent Skill writing figures.mjs, then local tweaks committed to Git

Describe the ask

Tell the Agent to explain a flow or draw an architecture diagram.

Generate the script

The Agent writes figures.mjs and renders a hand-drawn SVG locally.

Tweak locally

Next round: edit coordinates, colors, labels — then node render.mjs.

Commit to Git

Diffs are reviewable and reproducible. Day-to-day cost is coordinates, not tokens.

Why "what it looks like" matters

Left: box-only flow with node names; right: layered morphs and business objects in the diagram

Non-technical audiences remember "package" and "person", not "Step C". Use shapes for morphs; use boxes when the story is dependencies.

Fit / Not a fit

Great for

Research frameworks & teaching
Service topology & business paths
Architecture reviews & stakeholder talks
Structure diagrams you'll revise often

Not ideal for

Large-scale data exploration / interactive charts
Photo-realistic illustration or covers
Teams standardized on minimal Mermaid flows

Trigger Phrases

"Draw an architecture diagram for …"

"Explain this flow with a sketch"

"Make a hand-drawn infographic"

"Use sketch-infographic to draw …"

Installation

Terminal

$npx skills add morvanzhou/sketch-infographic

Run this command in your terminal, or simply ask your AI assistant to execute it.

Tell us what you want, AI will help you realize it

This site is built together with its users — your suggestion will be turned into a real feature by AI. See what everyone's hoping for, vote, follow, and help make it happen.

Frequently Asked Questions

: Mermaid shines for minimal engineering flows. sketch-infographic outputs whiteboard-style SVG — topology boxes when needed, plus circles, stacks, and custom glyphs for "what it looks like", with code you can tweak and commit.
: Those often look great on the first pass, then struggle with local edits and custom business objects. Code → SVG means local re-renders, version control, and no repeated image-model spend for small tweaks.
: Install with: npx skills add morvanzhou/sketch-infographic. Then ask your Agent to draw a diagram. For long-lived figures, keep the script in the repo and re-render with node render.mjs (SVG or PNG).
: Not for large-scale data exploration, interactive charts, or photo-level covers. If your team only needs minimal Mermaid flows and already standardizes on them, no need to switch. Best for research, teaching, architecture, and stakeholder structure diagrams.

Related Tools

Idea → MVP

A complete product development skill that guides you from inspiration discovery to idea validation and MVP implementation. Search trending products, validate feasibility, and build with your preferred tech stack.

GA Improve

Analyze website data via Google Search Console and Google Analytics 4 APIs, automate site audits, and generate data-driven improvement reports with prioritized action items.

Whoami

Cross-AI user identity profile sync service. Create one profile and every AI agent — Cursor, Claude, Codex, Windsurf — instantly knows your name, skills, preferences, and work style.

Home Advisor

Turn your AI assistant into an experienced house-buying advisor. Understand your needs through natural conversation, research properties from multiple sources, and display recommendations on an interactive browser dashboard.

JSON Formatter

Free online JSON formatter and beautifier tool. One-click format messy JSON data with syntax highlighting, auto-indent, error detection, expand/collapse, copy to clipboard. Essential developer tool for API debugging and config file viewing.

Markdown Editor

Don't know how to open a .md file? Drop it in your browser to view and edit instantly. Online Markdown editor with live side-by-side preview, code highlighting, image upload, and dark mode. Drafts auto-save locally — 100% private.

Markdown Convert

Free online Markdown converter: export .md files to PDF, PNG, JPG, WebP, HTML, and Word (DOCX) in seconds. Syntax highlighting, tables, task lists, light/dark themes, smart PDF pagination. 100% browser-local — your files never leave your device.