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.

Get Dottie

With Homebrew:

brew install --cask phin-tech/tap/dottie

Or download the latest Dottie-x.y.z.zip from Releases, unzip it, and drag Dottie into your Applications folder. You need macOS 14 Sonoma or later.

Dottie updates itself: once a day it checks GitHub for a newer release and offers to install it and relaunch (turn that off in Settings ▸ General, or use Dottie ▸ Check for Updates… any time). Updates are notarized and checked against a signing key built into the app. To try new features before they ship, turn on Get beta versions in the same place. With Homebrew, brew upgrade --greedy --cask dottie also works.

Ask your AI assistant to draw

Dottie works with Claude and other assistants that support MCP (a standard way for assistants to use apps). Once connected, you can say things like:

• "Draw our deployment pipeline as a left-to-right diagram."
• "Add a staging step between build and deploy."
• "Make a second page with the database tables, and link the Database box to it."
• "Make it clean instead of sketchy and save it as an SVG."

The assistant lays the diagram out, looks at the result, and tidies anything that reads badly.

Connect it once

Open Dottie, then Dottie ▸ Settings… ▸ MCP. Under Add to an MCP client:

• Claude Desktop (and most other apps): click Copy next to the JSON snippet, paste it into the app's MCP settings file, and restart the app. In Claude Desktop that file is under Settings ▸ Developer ▸ Edit Config.
• Claude Code: click Copy next to the command, and run it once in Terminal.

If you move Dottie to a different folder later, copy the snippet again.

To teach your assistant Dottie's tools and command line, and how to write extensions, install the skills too (for Claude Code, Codex, Cursor and other assistants that read skills):

npx skills add phin-tech/dottie

Watch it draw

Keep the drawing open in Dottie while you chat, and every change appears in the window as the assistant makes it. Each change can be undone with ⌘Z, like your own. Save when you like the result. You can tell the assistant to work on "the drawing I have open", or give it a file path. If Dottie isn't running, the assistant edits the file directly and you see the result next time you open it.

Draw it yourself

Pick a tool from the toolbar or press its letter:

Key	Tool		Key	Tool
V	Select		T	Text
R	Rectangle		C	Connector
O	Ellipse		P	Pencil
D	Diamond		E	Eraser
N	Note		H	Highlighter
			X	Redact

Double-click a shape to give it a label. Connectors stay attached when you move shapes around. To route one around something, select it and drag the small circle halfway along it to add a bend (on an elbow line, drag a segment sideways); double-click a bend to remove it. Where a new connector crosses one beneath it, it hops over with a little arc, so crossing lines don't look joined; Hop over crossings in the inspector turns that on or off for the selected lines (or, with none selected, for new ones, as does Settings ▸ General). The arrow keys nudge the selection a point at a time (⇧ for ten); holding one down is a single undo step.

• Flowcharts from the keyboard. Select a rectangle, ellipse or diamond and hold ⌘ while you press an arrow key: a copy appears that way, joined to it by an arrow. Press the arrow again (still holding ⌘) for another beside it, and let go of ⌘ to keep them (Escape, before you let go, drops them). The newest is selected, so Return names it. ⌥-arrow walks from shape to shape along the arrows (press it again to step through a decision's branches), Tab turns the selected shapes into the next kind (rectangle, diamond, ellipse), and ⇧1 zooms to fit the whole page.

• Sticky notes. Click with the Note tool (or drag out a size) and type GitHub Flavored Markdown: headings, bullet, numbered and - [ ] task lists, tables, quotes, code, links, and bold, italic, code and struck text. A new line in the text is a new line in the note, as in GitHub comments. Return starts a new line and Tab / ⇧Tab indent or outdent it; ⇧Return, ⌘Return, Escape or clicking away finishes, and the note shows the rendered text. Click a ☐ to tick it off, and pick a note color from the swatches in the inspector.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗