# MonoSketch: Client-side ASCII Diagram Editor

> MonoSketch is a Kotlin/JS browser editor for ASCII diagrams, technical flowcharts, circuit illustrations, and text art. Its character-grid approach produces portable plain text, while roadmap items and an announced TypeScript rewrite leave some collaboration and migration questions open.

**tuanchauict/MonoSketch** — An ASCII graph drawing app

- Repository: https://github.com/tuanchauict/MonoSketch
- Website: https://monosketch.io
- Stars: 1,825 · Forks: 46
- Language: Kotlin
- License: Apache-2.0
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/tuanchauict-monosketch

## Why MonoSketch Exists

MonoSketch addresses a specific documentation problem: diagrams often need to survive in places where images are inconvenient, unavailable, or difficult to maintain. A circuit sketch, software flow, or architecture outline can remain selectable text, fit into a Markdown document, and be edited without a separate image-editing workflow. The README presents the application as a browser-based tool for technical diagrams, flowcharts, circuit diagrams, and creative text art.

The intended audience is primarily engineers, technical writers, and developers who already think in characters and line boundaries. The README describes the application as client-side only and says that no server-side processing or cloud upload is involved. The browser is therefore the application boundary rather than a thin client for a remote drawing service. That design can be useful when a diagram contains internal implementation notes or when the user needs to produce text that can be copied directly into another tool.

MonoSketch does not behave like a general-purpose bitmap canvas. Its shapes are assembled from ASCII symbols, borders, connectors, labels, fills, and arrow decorations. This makes the output less visually polished than a rendered vector illustration, but it also makes the diagram legible when printed, pasted into a terminal, or displayed in a plain-text interface. The project is better understood as a structured text editor with drawing tools than as a substitute for a graphics design application.

## Kotlin/JS Architecture and Client-side Data Flow

The documented technology stack is Kotlin/JS for the application, SASS and Tailwind CSS for styling, and Gradle for the build. Kotlin is compiled to JavaScript, which allows the editor's interaction logic and drawing model to run in the browser. The repository layout includes `app/`, `src/`, Kotlin Gradle files, SASS configuration, Tailwind configuration, and a `kotlin-js-store/` directory. Those files point to a conventional web application build rather than a native desktop package.

The canvas is described as infinite, with unlimited scrolling in all directions. Drawing tools create rectangles, text labels, and lines. Shape properties then control borders, fills, rounded corners, line styles, and arrowheads. Smart snapping is intended to connect lines to shapes automatically, while layer management changes the order and focus of shapes. This indicates that the document is maintained as editable objects and then rendered onto a character-based canvas, rather than stored as one opaque block of text.

The README does not document the internal serialization format, undo model, synchronization format, or exact autosave storage mechanism. It documents multiple projects and autosave, but it does not explain whether projects are stored in browser storage, IndexedDB, or another mechanism. It also does not describe collaboration in the current feature set. Sharing and collaboration appear on the roadmap, including opening files from URLs and sharing to GitHub Gist, so those features should not be treated as available today.

## Development Installation and First Run

For users, the README points to the hosted application at `app.monosketch.io`. It does not provide an installation command for an end-user package, nor does it describe a standalone download for Windows, macOS, or Linux. The practical first step for a user is to open the hosted app and create a diagram there.

For contributors, the documented prerequisites are Java, optional Python 3.11+, and optional Pipenv. The recommended development path uses the repository's Gradle wrapper. The command below starts the Kotlin/JS browser development build with hot reload. The README also notes that `-Dorg.gradle.parallel=false` works around a KotlinJS issue in continuous mode.

```bash
./gradlew jsBrowserDevelopmentRun --continuous -Dorg.gradle.parallel=false
```

The README does not state what URL or port the development server exposes, so it does not provide a confirmed browser address to enter after the command. A contributor should use the build output to determine where the local application is served.

The documented production build command is:

```bash
./gradlew jsBrowserProductionRun --continuous -Dorg.gradle.parallel=false
```

If a proxy blocks direct access to `nodejs.org` or `yarnpkg.com`, the README documents the `-PuseSystemNodeJs=true` property for using locally installed Node.js and Yarn instead:

An alternative Python server is also documented. It uses Pipenv for dependency management and runs the development command through Pipenv:

```bash
pipenv install
```

After dependencies are installed, start the server with:

```bash
pipenv run dev
```

The README does not document a separate end-user installation procedure beyond the hosted application.

## Drawing Controls and Export Workflow

The editing model is built around a small set of explicit tools. Rectangle creates bordered and filled rectangular forms, Text adds labels or annotations, and Line connects points with selectable styles. Shape styling includes several border styles, fill characters, rounded corners, arrows, and line decorations. This gives the editor enough vocabulary for technical ASCII work without requiring a user to hand-align every character after changing a shape.

Snapping is practical for diagrams because lines need to meet shape boundaries cleanly. Layer management also matters when a label, connector, and shape occupy the same area. Copy, cut, paste, and duplicate are listed as standard operations, and dark mode is available. The export section says that selected shapes or an entire diagram can be exported, while a keyboard shortcut provides quick text copying: `Cmd + Shift + C` on macOS and `Ctrl + Shift + C` on Windows or Linux.

The feature set has a clear boundary. Grouping and a shape tree panel are roadmap items, as is a paint tool for freehand drawing. The roadmap also lists URL-based file opening, GitHub Gist sharing, and import or export capabilities. Those entries are not evidence that the shipped editor currently supports collaborative work or general file exchange. The README gives no detailed schema for imported files, no account system, and no documented permission model.

## Limits of the Character Grid

The largest limitation is the format itself. ASCII output depends on a monospaced environment and on glyph support. MonoSketch's v1.3.5 release specifically added thin arrows because the previously selected arrowheads may not render correctly in some fonts. That release note is a concrete reminder that a valid character diagram can still display differently across fonts, terminals, editors, and rendering environments.

The application is not a replacement for a raster or vector graphics editor when an image needs curves, color gradients, detailed icons, or arbitrary visual composition. Its character grid also imposes practical limits on spacing, alignment, and line weight. The example circuit in the README demonstrates the format's range, but it does not establish that MonoSketch can reproduce every drawing convention used by an organization.

Client-side operation removes a server dependency from the documented architecture, but it does not remove operational questions. The README says that work stays on the device and that autosave helps prevent loss, yet it does not document export backups, browser storage quotas, recovery behavior after clearing site data, or behavior across devices. A user whose diagrams are important should treat exported text as a deliberate backup action rather than assume that autosave is a portable project archive.

## MonoSketch Compared with a Conventional Graphics Editor

The clearest alternative is a conventional browser or desktop graphics editor that stores drawings as pixels, vectors, or styled scene objects. Those tools generally provide font-independent visual rendering, richer color and fill options, and collaboration features that are not part of MonoSketch's documented current release.

MonoSketch takes a different approach. Its native output is text, and its editing operations are centered on characters, borders, connectors, and labels. That makes it suitable when the destination is Markdown, a terminal, a source file, or a technical document where a reader should be able to copy and inspect the diagram. A graphics editor is more suitable when the destination is a presentation, a report with controlled visual design, or an image that must preserve its appearance independently of the reader's font.

The trade-off is direct. MonoSketch offers structure and snapping for ASCII shapes, while a graphics editor offers a wider visual vocabulary. MonoSketch's client-side deployment also differs from a hosted collaborative service, because the README does not document server processing, accounts, or real-time editing.

## Maintenance, Licensing, and Upgrade Cost

The repository is not archived, and its last push was on 2026-10-05. The README states that the project is being rewritten in TypeScript and points to the `port-to-js` branch and pull request #584 for details. That rewrite is an important maintenance consideration for adopters: the current Kotlin/JS implementation and the planned TypeScript implementation may have different build requirements, contributor workflows, and release paths. The README does not provide a migration schedule or compatibility statement for existing diagrams.

The most recent listed release is v1.3.5 from 2024-06-16. Earlier listed releases include v1.3.4, which introduced a new crossing point algorithm, and v1.3.3, which changed focus-shape movement. These release notes show changes to rendering and interaction behavior, but the README does not provide a detailed upgrade guide or a versioning policy for document files.

MonoSketch is licensed under Apache-2.0. The repository includes a `LICENSE` file, and the README displays an Apache 2.0 badge. The license permits use under its stated terms, but this review does not provide legal advice. Teams should review the license and dependency notices separately before embedding the application in a product or distributing a modified build.

## Conclusion

MonoSketch fits engineers and technical writers who need diagrams that remain readable as plain text and can be edited without uploading content. It is a poor fit for pixel-level illustrations, collaborative editing, or teams that need supported collaboration features now. Review the TypeScript rewrite and current browser workflow first, then confirm that its ASCII export fits your documentation tooling.

## FAQ

### How do I install MonoSketch?

For regular use, the README directs users to the hosted app at `app.monosketch.io`. It does not document a standalone user installation package. Contributors can use the Gradle development commands after installing Java and the repository's build prerequisites.

### Does MonoSketch support collaboration?

Not as a documented current feature. Sharing and collaboration, including GitHub Gist sharing and opening files from URLs, are listed on the roadmap rather than described as available features.

### Can I export a MonoSketch diagram as text?

Yes. The README lists export of selected shapes or an entire diagram, and it documents `Cmd + Shift + C` on macOS and `Ctrl + Shift + C` on Windows or Linux for quick text copying.

## Sources

- [License: Apache-2.0](https://github.com/tuanchauict/MonoSketch/blob/main/LICENSE)
- [Project website](https://monosketch.io)
- [README](https://github.com/tuanchauict/MonoSketch/blob/main/README.md)
- [Releases](https://github.com/tuanchauict/MonoSketch/releases)
- [tuanchauict/MonoSketch on GitHub](https://github.com/tuanchauict/MonoSketch)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/tuanchauict-monosketch