Skip to content

Dottie

Diagrams that look hand-drawn, on your Mac, and your AI assistant can draw them for you.

Sketch a flowchart, a system diagram or a whiteboard idea in seconds. Switch to a clean, precise look when it needs to go in a document. Or just ask Claude to draw it, and watch the shapes appear. Then make it move.

That animation is the Dottie drawing itself, played in your browser by dottie.js: press play, drag the slider, or step with the arrow keys.

Get Dottie on GitHub See the animation demos Put one on your site

What it does

  • Draw it yourself with shapes, connectors that stay attached, sticky notes in Markdown, pictures, pages, links, layers and themes. Sketchy or clean.
  • Ask your assistant to draw it. Dottie works with Claude and other assistants that support MCP: describe a diagram and watch it appear in the window, one undoable change at a time.
  • Make it move. Build a diagram up shape by shape, send requests along its arrows, set them marching, pan and zoom a camera around it, step through it scene by scene, or draw two pages and Magic Move from one to the other. Turn a piece into a symbol, like a Flash movie clip, and place it again and again, each copy playing its own animation. Export a GIF, an animated PNG, an MP4, Lottie, or a web page like the ones here.
  • Make it clickable. On the web, a shape can play a scene when clicked, or open a link, so a diagram can wait for the reader to pick which request to follow.
  • Bring diagrams in and send them out: Mermaid, Excalidraw, draw.io and SVG in; PNG, SVG, PDF, Mermaid and HTML out.

The README has the details, from installing to keyboard shortcuts.