MonoSketch

MonoSketch

[License] [Kotlin] [SASS] [GitHub release (with filter)] [Twitter Follow]

A powerful, client-side-only web-based tool for creating ASCII diagrams and text-based visualizations. Perfect for documentation, technical diagrams, and creative text art.

Try it now at app.monosketch.io

Note: This project is being rewritten in TypeScript. Check out the port-to-js branch or PR #584 for details.

Overview

MonoSketch is a fully client-side ASCII diagram editor that runs entirely in your browser. No server-side processing, no data uploaded to the cloud - your work stays on your device. Create technical diagrams, flowcharts, circuit diagrams, and more using only ASCII characters.

        +10-15V                0,047R                                        
       ●─────────○───────○─░░░░░─○─○─────────○────○─────╮                    
    +  │         │       │       │ │         │    │     │                    
    ─═════─      │       │       │ │         │    │     │                    
    ─═════─    ──┼──     │       │╭┴╮        │    │     │                    
    ─═════─     ─┼─      │       ││ │ 2k2    │    │     │                    
    -  │      470│ +     │       ││ │        │    │     │                    
       │       uF│       ╰──╮    │╰┬╯       ╭┴╮   │     │                    
       └─────────│          │    │ │     1k │ │   │     ▽ LED                
                 │         6│   7│ │8       │ │   │     ┬                    
              ───┴───    ╭──┴────┴─┴─╮      ╰┬╯   │     │                    
               ─═══─     │           │1      │  │ / BC  │                    
                 ─       │           ├───────○──┤/  547 │                    
                GND      │           │       │  │ ▶     │                    
                         │           │      ╭┴╮   │     │                    
               ╭─────────┤           │  220R│ │   ○───┤├┘  IRF9Z34           
               │         │           │      │ │   │   │├─▶                   
               │         │  MC34063  │      ╰┬╯   │   │├─┐ BYV29       -12V6 
               │         │           │       │    │      ○──┤◀─○────○───X OUT
             - │ +       │           │2      ╰────╯      │     │    │        
6000 micro ────┴────     │           ├──○                C│    │   ─── 470   
Farad, 40V ─ ─ ┬ ─ ─     │           │ GND               C│    │   ███  uF   
Capacitor      │         │           │3                  C│    │    │\       
               │         │           ├────────┤├╮        │     │   GND       
               │         ╰─────┬───┬─╯          │       GND    │             
               │              5│  4│            │              │             
               │               │   ╰────────────○──────────────│             
               │               │                               │             
               ╰───────────────●─────/\/\/─────────○────░░░░░──╯             
                                     2k            │         1k0             
                                                  ╭┴╮                        
                                                  │ │5k6   3k3               
                                                  │ │in Serie                
                                                  ╰┬╯                        
                                                   │                         
                                                  GND                        

Features

Drawing Tools

• Rectangle - Create bordered and filled rectangular shapes
• Text - Add text labels and annotations
• Line - Draw connecting lines with various styles

Shape Styling

• Fill - Fill shapes with characters
• Border - Multiple border styles and characters
• Line decorations - Add arrows and other heads to line ends
• Rounded corners - Soften rectangular shapes

Editing Capabilities

• Infinite canvas - Unlimited scrolling in all directions
• Autosave - Never lose your work
• Multiple projects - Organize your diagrams
• Standard operations - Copy, Cut, Paste, Duplicate
• Layer management - Move shapes and change their stacking order
• Dark mode - Easy on the eyes
• Smart snapping - Connect lines to shapes automatically

Export Options

• Export selected shapes or entire diagrams
• Quick text copy with keyboard shortcuts:
  • macOS: Cmd + Shift + C
  • Windows/Linux: Ctrl + Shift + C

Roadmap

Grouping

Group shapes together for easier manipulation and organization. Includes a shape tree panel for managing complex diagrams with nested structures.

Paint Tool

Freehand drawing with custom characters, plus expanded options for fills, borders, and line decorations.

Sharing & Collaboration

• Open files from URLs
• Share to GitHub Gist
• Import/export capabilities

Contributing

Contributions are welcome! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.

Technology Stack

• Kotlin/JS - The entire application is written in Kotlin, compiled to JavaScript
• SASS - CSS preprocessing
• Tailwind CSS - Utility-first CSS framework
• Gradle - Build system

Prerequisites

• Java - Required for Gradle and Kotlin compilation
• Python 3.11+ (optional) - For alternative development server
• Pipenv (optional) - If using Python development server

Development Setup

Option 1: Gradle (Recommended)

Run development build with hot reload:

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

Run production build:

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

Note: The -Dorg.gradle.parallel=false flag is a workaround for a KotlinJS build issue with --continuous mode.

Note: If you're behind a proxy that blocks direct access to nodejs.org/yarnpkg.com, pass -PuseSystemNodeJs=true to use your locally installed Node.js/Yarn instead of letting Gradle download them.

Option 2: Python Development Server

Alternative approach when Gradle hot reload is not working properly:

# Install dependencies
pipenv install

# Run development server
pipenv run dev

How to Contribute

1. Fork the repository and create a new branch for your feature or bug fix
2. Make your changes following the existing code style
3. Test your changes thoroughly
4. Submit a pull request with a clear description of your changes

Getting Help

• Open an issue for bug reports or feature requests
• Follow @MonoSketchApp on Twitter for updates

License

This project is licensed under the Apache License 2.0.