DrawMotive for VS Code

Make your ideas easy to understand.

Describe a process in TextGraph. Refine it on a canvas in VS Code. Share it as an image.

Get DrawMotive · Try the text → diagram demo · Get the editable example

A familiar story, ready to make your own. View the full diagram.

Make it yours in a minute

1. Install the latest VSIX from Releases with Extensions: Install from VSIX…. Stable versions are also on the VS Code Marketplace.
2. Save online-order.draw.png to your workspace and open it in VS Code.
3. Change Delivered to At your door, then click Save diagram.

Put the PNG in your README or share it with your team. Open the same file in DrawMotive whenever the story changes.

Start with text. Finish with your own touch.

Edit this example in the TextGraph playground, or use the same source in TextGraph Markdown Preview.

(horizontal)

checkout(primary): Checkout {
  pay -> payment
  payment ->(dashed warning) pay : No, retry
}

fulfillment(success): Fulfillment {
  ship -> delivered
  email
}

payment -> ship : Yes
payment -> email : Yes

pay: Pay for order
payment(diamond fill primary): Paid?
ship: Ship order
email: Email receipt
delivered(ellipse fill success): Delivered

Open the full diagram · Copy the source · Try this diagram

For Chinese, Japanese, and color emoji, see the packaged font examples.

Connections inside a group introduce its local nodes and may style endpoints inline. Keep standalone node labels or styles at the root, in any order. Root short names find a node when its name is unique. The same name in two groups creates two nodes: Review { done } and Delivery { done } need Review.done or Delivery.done when referenced at the root. Short names inside each group are local. Group names follow the same rule, and nested names can use a unique suffix such as Backend.payment. Qualified connection endpoints refer to existing objects without changing containment.

Example with repeated node names

The downloadable drawing was generated from this source. Canvas changes are saved in the drawing; they do not rewrite the text.

For a blank canvas, run DrawMotive: New Diagram and save as your-idea.draw.png.

Works offline, without an account. Requires VS Code 1.95 or newer on Windows, macOS, or Linux.

Report an issue · Development · Contributing · Release notes