This project is under rewritten to TypeScript, check out
port-to-jsbranch or PR https://github.com/tuanchauict/MonoSketch/pull/584 for more detail
Mono Sketch is a client-side-only web-based sketch tool for drawing ASCII diagrams. You can use the app at app.monosketch.io.
+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
Draw tools:
- Rectangle
- Text
- Line
Shape formats:
- Fill
- Border
- Line start/end heads
- Rounded corner
Editing:
- Infinity scroll, no limitation for 4 directions
- Autosave
- Multiple projects
- Copy / Cut / Paste / Duplicate
- Move and change shapes' order
- Dark mode
- Line snapping: connect a line to a shape
Exporting:
- Export selected shapes
- Copy as text (
cmd + shift + Corctrl + shift + C)
Group is added as a kind of shape but until now, there are no features that are applying Group except for rendering. Besides, the shape tool does not work with groups or multiple selected shapes. This project aims to make the tool able to work with Group and also add a Shape tree on the left of the tool.
Currently, Mono Sketch provides only three tools: Rectangle, Text, and Line. One tool that is also used frequently when drawing with ASCII is paint - draw with a specific character. This project also aims to provide richer options of Fill, Border, Line Start/End head
Allow opening files from a url, share to gist, etc.
This project is fully written with KotlinJS and SASS for CSS. There is no environment setup required except for Java.
To run debug:
./gradlew browserDevelopmentRun --continuous -Dorg.gradle.parallel=falseOr with production configuration
./gradlew browserProductionRun --continuous -Dorg.gradle.parallel=false-
-Dorg.gradle.parallel=falseis a workaround for a bug on KotlinJS build with--continuous.
Run with Python
This is an alternative to browserDevelopmentRun for running the app for development (sometimes,
the Gradle does not reload when the code is updated).
Requirements: Pipenv.
pipenv install
pipenv run dev