MonoSketch - ASCIIベースのダイアグラム作成ツール

 (monosketch.io)
17 ポイント 投稿者 GN⁺ 2026-02-14 | 1件のコメント | WhatsAppで共有
  • テキストだけでアイデアを視覚的な設計に変換できるクライアントオンリーのWebアプリケーション
  • Kotlinで記述され、JSにコンパイルされるオープンソース。SASS/Tailwindを使用
  • 四角形、線、テキストボックスなどの基本図形ブロックを組み合わせて、複雑な構造やシステムダイアグラムを表現可能
  • 書式指定機能によって、単純なASCII文字をさまざまなスタイルの視覚要素に変換
  • PowerPointやGoogle Slidesがなくても、プレゼンテーション作成と視覚的な説明を可能にするツール

概要

  • MonoSketchはASCIIスケッチおよびダイアグラム作成アプリで、アイデアを視覚的に表現できるツール
    • テキストベースのインターフェースを通じて、複雑な回路図、システム構造、ネットワークフローなどをASCII文字で構成
    • 「Unleash your ideas with ASCII」というスローガンのもと、シンプルなテキストだけでも視覚設計を可能にする

基本構成要素

  • Rectangle, Line, Text boxなどの基本描画機能を提供
    • さまざまな境界線スタイル、塗りつぶし文字、矢印装飾をサポート
    • 角丸処理により視覚的な完成度を向上
  • 編集機能中心のインタラクティブ環境
    • 無限キャンバスにより自由なスクロールとズームに対応
    • 自動保存および複数プロジェクト管理機能を提供
    • コピー、切り取り、貼り付け、複製などの標準編集コマンドをサポート
    • レイヤー管理とスマートスナッピングにより、正確な図形整列が可能
    • ダークモードをサポート
  • エクスポート機能
    • 選択範囲またはダイアグラム全体をテキストとして即座にコピー可能
    • ショートカット対応: macOS Cmd + Shift + C、Windows/Linux Ctrl + Shift + C
  • 今後のロードマップ
    • グループ化機能によって複雑な構造の図形を管理
    • ペイントツールによる自由曲線および文字ベースのドローイング
    • GitHub Gist共有およびURL読み込みなど、コラボレーション機能を拡張予定

アプリケーションとUI

  • app.monosketch.io からWebで利用可能
    • 検索ボックス、ボタン、ワークスペース、パネルなどのUI要素をASCIIで表現したモックアップを含む
    • ログイン画面、会員登録フォームなどもASCII形式で可視化
  • プレゼンテーション作成機能により、PowerPointやGoogle Slidesなしでも発表資料を構成可能

技術スタックとライセンス

  • Kotlin/JSベースでアプリケーション全体を実装（Kotlinで開発後、JSにコンパイル）
  • SASSおよびTailwind CSSを活用したスタイリング
  • Gradleビルドシステムを使用（ホットリロード開発モードをサポート）
  • Python 3.11+およびPipenvによる代替開発サーバーオプションを提供
  • Apache License 2.0オープンソース

関連記事

1件のコメント

 
GN⁺ 2026-02-14
Hacker Newsのコメント

  • 私は Monodraw を使っている
    これまでで 最も満足度の高い買い物 だった

    • 私も Monodraw を使っているが、1つ残念な点がある
      テキスト編集ポップアップを ESCキーで閉じる機能 がいまだにない
      毎回 ESC を押してしまうのに反応がなくて、もどかしい
      自分でバイナリをパッチしようとしたが、アップデート機構が壊れてしまって諦めた
    • Mac から Windows に移ってから、いちばん恋しかったアプリが Monodraw だった
      でも今回新しく出たこのツールは、かなり良い 代替品 に見えるのでぜひ使ってみたい
    • 図や落書き、あるいは設定ファイルのヘッダーを飾るときに、fig とボックス、影などを組み合わせて使うのが本当に便利だった
    • Mac をやめてからも、いまだに 恋しいアプリ の1つだ
    • 昔は Mac で Monodraw が本当に好きだった
      今は Linux をメインで使っているので代替アプリを探していたが、今回見たこのツールは今まで見た中で 最も近い代替 のように思える

  • 似たツールとしては TextPaint、Archetype (archive)、Textik、Asciiflow、Fsymbols Draw などがある

    • それと JavE も忘れてはいけない

  • ヘッダーの回路図はあまりにも雑で、まるで AIが誤って生成した回路図 のように見える
    シンボルのスタイルがバラバラだし、ピンラベルもなく、左上のコンデンサは短絡している

    • 問題は、専門家がこうした誤りにすぐ気づくことではなく、初心者が間違って学んでしまうこと だ
      この状態で学べば、将来の専門家が誤った土台の上で育つことになる
    • 私はコンデンサが短絡しているのには気づかなかったが、むしろ短い線（通常は陰極）を「+」で示して GND に直結しているのを見て驚いた

  • 「ASCII」という言葉を使う人たちにひとこと言いたい
    Monosketch は実際には ASCII だけを使っているわけではない
    たとえば「◎」（U+25CE）のような Unicode文字 を使っている

    • それなのにランディングページには「Unleash your ideas with ASCII」と大きく書かれていて、ちょっと笑ってしまった :-)
    • 歴史的に見ると、線やボックス描画文字は IBM PC 時代の Code page 437 で追加されたもので、真の ASCII ではない
      本当の ASCII でボックスを描くなら | と - だけを使うしかない

  • Emacs を使っているなら uniline パッケージ がかなり便利

  • Markdeep でも ASCII アートでダイアグラムを描ける
    かなり 完成度の高いツール だ

  • HTML では spellcheck 属性を false に設定することを勧める
    そうしないと「GND」や「uF」のようなラベルごとに赤い下線が付いて見づらい

  • Graph-Easy は基本的に ASCII を生成するが、ボックス文字、SVG、PNG などさまざまな出力形式をサポートしている
    WYSIWYG 方式ではなく、ダイアグラムをテキストで記述すると結果を生成してくれる仕組みだ

  • さっきこのツールで簡単なダイアグラムをいくつか作ってみたが、使いやすくて エクスポート品質 も良かった
    ただ、改善されると良い点がある

    1. 小さな四角形を動かすとき、拡大ではなく移動になることが UI フィードバックでもっと明確だとよい
    2. 別のタブで Monosketch を開くと 新しいダイアグラムを同時に作れない — タブ間でコンテキストが共有されているようだ

  • macOS 向けネイティブアプリとしては Monodraw もある

    • ただし Monodraw は現在 メンテナンスモード で有料だ
      名前からして、Monosketch はその 明確な代替品 のようだ