TextGraph

Appearance

TextGraph + DrawMotive

Free · MIT License

Turn relationships
into diagrams.

A little text. Automatic layout. A canvas for your finishing touches.

Try this example Try the visual editor

No account. Runs in your browser.

TextGraph source
web -> api -> database
The diagram
A web application connects to an API, which connects to a database. Three nodes and two arrows, generated from one line of TextGraph.
One line. A complete diagram.Open in playground

Small syntax. Serious diagrams.

Less to write.
More to show.

Learn the syntax

Connect.

Names and arrows. That is a diagram.

TextGraph source
browser -> lb
lb -> app1 -> database
lb -> app2 -> database
The diagram
A browser connects to lb, which routes requests to app1 or app2; both application replicas access the same database.
Connect the piecesEdit this example

Express.

Decisions, labels and styles in a few lines.

TextGraph source
draft -> review
review -> publish : Yes
review -> draft : No

review(diamond fill primary): Approved?
The diagram
A draft goes to a diamond-shaped approval decision. Yes leads to publish, while No loops back to the draft.
A decision and a feedback loopEdit this example

Organize.

Group related nodes. Let the layout follow.

TextGraph source
backend(fill info) { api -> worker }
web -> backend.api
backend.worker -> database
The diagram
An API and Worker are grouped in a highlighted backend boundary. The web application connects to the API, and the Worker connects to an external database.
Group the application tierEdit this example
Automatic layout & routingNested groupsShapes & stylesPNG & SVGChinese, Japanese & emoji

From generated to yours

Start with text.
Finish with your own touch.

Write it yourself or draft it with AI. Generate a diagram, then move shapes, edit labels and draw connections in DrawMotive.

Open the editor demo Draft with AI
Real DrawMotive browser editor: TextGraph source on the left, an editable grouped order flow on the canvas, drawing tools, and document save and open controls.
TextGraph → editable document → PNG / SVGEmbed this editor

Save the document or an editable PNG to keep canvas changes. Generating again replaces the drawing; canvas edits do not rewrite TextGraph.

Where you already work

From your editor
to your documentation.

Choose your workflow
README.md · Markdown & VitePress
A fenced block
```textgraph
web -> client -> transport
cli -> client

web: Web app
cli: Admin CLI
client(fill primary): API client
transport: HTTP transport
```
A Web app and an Admin CLI both depend on an API client library, which depends on an HTTP transport. Arrows point from each consumer to its dependency.

Ship the diagram with the docs.

Keep readable source in Git. Build real images into your documentation site.

Add to Markdown & VitePress

One engine. Your choice of delivery.

In your app.
On your infrastructure.

Render locally with the SDK, embed the visual editor, or serve PNG and SVG from your own Docker container.

SDK integration: a browser, Worker, Node.js or React application calls TextGraph; the renderer returns PNG or SVG, and the Editor provides a visual canvas. React renders PNG.

npm · JavaScript / TypeScript

A renderer. An editor. Your product.

const graph = await initializeTextGraph();
const image = await graph.renderSvg('web -> api -> db');
Explore the SDK Embed the editor
Same TextGraph. Same rendering engine.Try a complete architecture example A load balancer routes requests to two application replicas. Both replicas access the shared database and a shared cache.
MITLICENSE

Yours to use. Yours to build on.

Free under the MIT License.

Personal projects, company work, commercial products and resale. MIT allows all of them, with no license fee. Keep the copyright and license notice.

Read the MIT license

Site documentation is CC BY 4.0. Bundled fonts and dependencies retain their own licenses.

One connection is all it takes.

Open an example. Change a line. Make it yours.

Create your diagram Try the renderer SDK
Can I use plain English or AI?

TextGraph uses a small, structured syntax. Ask an AI assistant to draft it, then review the source and render it. Get the prompt and language references.