# lewish/asciiflow

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/lewish-asciiflow).**

5,759 stars · 408 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/lewish/asciiflow
- Homepage: https://asciiflow.com
- awesome-repositories: https://awesome-repositories.com/repository/lewish-asciiflow.md

## Description

Asciiflow is a browser-based tool for creating text-based diagrams using keyboard characters. It functions as an ASCII diagram editor, enabling users to draw directly in the browser by typing characters onto a grid.

The editor stores diagrams as a 2D character grid, allowing for precise row and column operations during drawing and editing. It renders these characters onto an HTML5 canvas for efficient pixel-level display, and supports a keyboard-driven input model that translates keystrokes into diagram elements without requiring a mouse. The tool includes an undo/redo command stack for reversible editing actions.

Completed diagrams can be exported as plain text through serialization of the internal character grid, making them easy to copy or save as ASCII art.

## Tags

### Web Development

- [ASCII Diagram Editors](https://awesome-repositories.com/f/web-development/browser-based-drawing-applications/ascii-diagram-editors.md) — Is the core capability: drawing text-based diagrams directly in the browser using keyboard characters. ([source](https://cdn.jsdelivr.net/gh/lewish/asciiflow@main/README.md))
- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Implements an undo/redo command stack for reversible editing actions in the diagram editor.

### Part of an Awesome List

- [ASCII Diagram Editors](https://awesome-repositories.com/f/awesome-lists/devtools/visualization-and-diagrams/browser-based-diagramming-tools/ascii-diagram-editors.md) — Defines the domain: creating text-based diagrams in the browser using keyboard characters.
- [Developer Tools](https://awesome-repositories.com/f/awesome-lists/devtools/developer-tools.md) — Web-based tool for drawing flow diagrams.
- [Developer Utilities](https://awesome-repositories.com/f/awesome-lists/devtools/developer-utilities.md) — Web-based tool for drawing flow diagrams.
- [Diagramming Tools](https://awesome-repositories.com/f/awesome-lists/devtools/diagramming-tools.md) — Tool for creating diagrams using ASCII characters.

### Development Tools & Productivity

- [Diagram Keystroke Processors](https://awesome-repositories.com/f/development-tools-productivity/mouse-input-handlers/keyboard-and-mouse-event-capture/diagram-keystroke-processors.md) — Provides the keyboard-driven input model that translates keystrokes into diagram elements without a mouse.

### Graphics & Multimedia

- [ASCII Diagram Editors](https://awesome-repositories.com/f/graphics-multimedia/ascii-art-generators/ascii-diagram-editors.md) — Is the product identity: a browser-based tool for creating text-based diagrams using keyboard characters.
- [ASCII Diagram Canvas Renderers](https://awesome-repositories.com/f/graphics-multimedia/html5-canvas-libraries/terminal-canvas-renderers/ascii-diagram-canvas-renderers.md) — Provides the core rendering engine that draws ASCII characters onto an HTML5 canvas for diagram display.

### Operating Systems & Systems Programming

- [Diagram Character Grids](https://awesome-repositories.com/f/operating-systems-systems-programming/character-grid-state-tracking/diagram-character-grids.md) — Implements the core data structure that stores diagram content as a 2D character grid for editing.

### Data & Databases

- [ASCII Diagram Exporters](https://awesome-repositories.com/f/data-databases/data-serialization-formats/structured-data-exporters/analysis-result-exporters/query-result-exporters/plain-text-table-exporters/ascii-diagram-exporters.md) — Ships an export feature that serializes the character grid into plain text for copying or saving.