TextGraph for Markdown Preview

Write the flow. See the diagram.

Turn a few lines in your Markdown into a diagram people can follow, right beside your text in VS Code.

Install TextGraph · Try this diagram · Open the example Markdown

TextGraph source beside its compact horizontal online-order diagram: Checkout and Fulfillment, with a payment decision, a dashed retry loop, and shipping and email receipt branches.

Try it with your own words

Install TextGraph for Markdown Preview and open online-order.md in a trusted workspace.
Run Markdown: Open Preview to the Side (Ctrl+K V, or Cmd+K V on macOS).
Change Delivered to At your door. The diagram updates as you type, including unsaved edits.

Your diagram stays with your documentation as readable text.

```textgraph
(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
```

Online order: checkout and fulfillment, with a payment decision, a dashed retry loop, and parallel shipping and email receipt branches.

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

Renders locally, without an account or API key. Requires VS Code 1.101 or newer and a trusted workspace; the first preview takes a few seconds to initialize.

Want to move shapes and edit on a canvas? Try the downloadable editable example in DrawMotive for VS Code. This Markdown extension previews TextGraph; it does not transfer a source block into the visual editor.

Report an issue · Development and support · Project