A terminal drawing editor for developers who want editable diagrams, UI mocks, and text graphics without leaving the terminal.
## Packages - `@termdraw/app` — the standalone terminal app with the `termdraw` command - `@termdraw/opentui` — embeddable OpenTUI components and renderables - `@termdraw/pi` — Pi package that opens termDRAW in a Pi overlay ## Install the app Requirements: - [Bun](https://bun.sh) 1.3+ - A terminal with mouse support ```bash npm install --global @termdraw/app ``` ## Quick start ```bash termdraw ``` Draw something, then press `Enter` or `Ctrl+S` to export the rendered art to stdout. Press `Ctrl+D` to save the editable diagram as a native `.td.json` document. If you opened a diagram with `--load`, termDRAW reuses that path by default; otherwise it prompts for one inside the app. ## App usage ```bash # open an editable native document from a file termdraw --load architecture.td.json # open an editable native document from stdin # requires a controlling terminal for the interactive editor session cat architecture.td.json | termdraw --load - # save the rendered art directly to a file termdraw --load architecture.td.json --output diagram.txt # save plain text directly to a file termdraw --output diagram.txt # export a fenced Markdown code block termdraw --fenced > diagram.md # show CLI help termdraw --help ``` termDRAW! outputs terminal text, not SVG or bitmap graphics. Use native `.td.json` documents when you want to reopen and keep editing a drawing. Plain-text output remains an export format and does not preserve the original object metadata. ## Use it in Pi ```bash pi install npm:@termdraw/pi ``` Then inside Pi: ```text /termdraw ``` ## Embed in an OpenTUI app ```bash npm install @termdraw/opentui @opentui/core @opentui/react react ``` ```tsx import { createCliRenderer } from "@opentui/core"; import { createRoot } from "@opentui/react"; import { TermDrawApp } from "@termdraw/opentui"; const renderer = await createCliRenderer({ useMouse: true, enableMouseMovement: true, autoFocus: true, screenMode: "alternate-screen", }); createRoot(renderer).render(