2 ポイント 投稿者 GN⁺ 2024-03-10 | 1件のコメント | WhatsAppで共有
  • Monodrawは、ダイアグラム・フローチャート・データ構造をプレーンテキストで描き、技術文書やコード内でそのまま読めるようにするMac向けASCIIアートエディタ
  • 出力結果はテキストなのでコピー&ペーストしやすく、必要なときはPNG・SVG書き出しで画像としても作成可能
  • マインドマップ、ERダイアグラム、バナー作成まで対応し、単純なテキスト編集よりもドキュメント向け可視化に重点を置いている
  • FIGletと標準の148種類のフォント、線・矩形・整列ガイド・グループ・ショートカットなど、反復的なテキストアート作業を減らす機能を提供
  • macOS 11 Big Sur以降が必要で、コマンドラインツールはWebサイトからの直接ダウンロード版にのみ含まれ、ストアで購入したその版に付属する

テキストで描くMac向け可視化ツール

  • MonodrawはMacでASCIIアートを作成するためのエディタ
  • ダイアグラム、レイアウト、フローチャートのような構造をテキストベースで作成できる
  • アルゴリズム、データ構造、バイナリフォーマットのようにコードだけでは把握しづらい対象を視覚的に整理するのに使える
  • 出力結果がプレーンテキストなので、文書、コード、仕様書の中にほぼそのまま挿入できる
  • 画像が必要な場合はPNGとSVGで書き出せる

技術文書とデータモデルの表現

  • コードや仕様書に含めるテキストダイアグラムは、構造を素早く理解する助けになる
  • データ構造、アルゴリズム、データフォーマットの可視化は、読む人が関係性や流れを把握するうえで重要
  • コードは書く時間より読む時間のほうが長いため、テキストダイアグラムは保守やレビューの過程で役立つ可能性がある
  • マインドマップ

    • プレーンテキストのシンプルさとマインドマップの手法を組み合わせる
    • 無限キャンバス上でテキストを好きな位置へ移動できる
    • テキストファイルの線形構造に縛られない
  • ERダイアグラム

    • データモデルをシンプルなエンティティ関係図として可視化する
    • Crow’s Foot記法を3種類のバリエーションでサポート

テキストアート作成機能

  • バナーはワンクリックで作成できる
  • FIGletを内蔵し、標準で148種類のフォントを収録
    • カスタムフォントにも対応
    • テキストボックスのサイズ調整、フォント変更、配置調整をターミナルなしでインタラクティブに行える
  • テキストツールはCoreTextベースのカスタムテキストエンジンで動作
    • 配置、位置、行の進行方向、行送りを調整できる
    • ワンクリックでテキストの周囲に枠線を追加できる
  • 線ツールは図形同士の接続を簡単にし、直交線と階段状の線をサポート
    • 線のダッシュパターンを設定できる
    • 接続点によって線を他の図形に動的に固定でき、図形を移動した後の再配置の手間を減らせる
  • 矩形ツールはテキストアートでよく使われるボックスを作る機能
    • 枠線と背景を数回のクリックで指定できる
    • 影を追加できる
    • カスタム接続点で線を正確な位置に固定できる

キャンバス作業を減らす補助機能

  • 基本の描画ツールとしてPencil、Eraser、Bucket Fill、Pickerを提供
    • 画像をキャンバス上にオーバーレイしてトレース用途に使える
  • グループ機能は複数の図形をひとまとめにして、複製や移動を簡単にする
  • 整列ガイドは、コンテンツの配置やサイズ調整時に文字数を直接数えなくてもよくしてくれる
  • フォーカス機能は、キャンバスの特定部分に集中したいときに、それ以外の図形をロックまたは非表示にできる
    • 現在見えている要素に集中できるよう拡大も可能
  • すべての機能はショートカットキーで利用可能
    • ツールは修飾キーなしの単一キー入力で素早く選択できる

macOS対応とコマンドラインツールの条件

  • MonodrawはテキストレイアウトエンジンからインターフェースまでmacOS向けネイティブアプリとして設計されている
  • テキストアートはコピーして任意のテキストエディタに貼り付ける形で書き出せる
  • システム要件はmacOS 11 Big Sur以降
    • より古いmacOSではMonodraw v1.3が利用でき、macOS 10.10 Yosemite以降が必要
    • Monodraw v1.5はmacOS 10.14 Mojave以降が必要
  • コマンドラインインターフェースは直接ダウンロード版にのみ含まれる
    • Webサイトから直接ダウンロードし、ストアで購入した版に含まれる
    • Mac App Store版にはApp Sandboxの制限によりコマンドラインツールを含められない
    • バージョン管理フックを活用して、コミット時に文書を自動生成するといった使い方ができる
    • JSON出力にも対応し、プログラムから扱いやすい
  • Monodrawはデータを一切収集しないとしている

1件のコメント

 
GN⁺ 2024-03-10
Hacker News のコメント
  • 結局いつも Monodraw に戻ってきてしまう
    ほかのアプリは機能やスタイルの選択肢が多すぎて、肝心の内容に集中しにくいが、Monodraw は気が散らない
    それでも十分な機能があり、かなり多くのものを作れる。特にアンカーが気に入っている: https://tamasruss.com/articles/monodraw-anchors

    • ほかのアプリは内容に集中できなくすると言いながら、Monodraw でレスポンシブな区切り線アンカーポイントをいじるのは問題ない、というのは少し皮肉に感じる
      それでも手法自体はすっきりしている
    • クラス用の UML ボックスが本当に便利で、チュートリアルも良い
  • このツールは本当に好きなアプリの一つで、リリースされたときにすぐ購入した
    こうしたドキュメント作成に何度も使っている: https://github.com/ivank/potygen/blob/main/packages/potygen/...
    ASCII は非常に多用途なので、予想外の場所に見栄えのする図を入れて理解しやすくできる

    • あの角は Unicode ブロック文字のように見える
    • この例はソフトウェアの魅力をすぐに伝える素晴らしい図で、自分でも試してみたくなる
    • 656行目の「With Expression」ダイアグラムは emacs では問題なく見えるが、実際のリンクを chrome で開くと右側がすべて崩れて見える
      文字自体は正常だが、github のフォント選択が拡張部分の「意味のある空白」をうまく扱えていないようだ
    • 見せたい行を選択して、その位置にリンクするほうがよさそう
  • Web ベースのテキスト・ダイアグラムツールの一覧を管理している: https://xosh.org/text-to-diagram/
    こうした ASCII 描画ツールの Web 代替としては、https://fsymbols.com/draw/, https://textik.com/, https://asciiflow.com/#/, https://web.archive.org/web/20210503172024/https://fatiherik..., https://app.monosketch.io などがある

    • 一覧には Pikchr も検討に値する
      SQLite の作者が作ったツール: https://pikchr.org/home/doc/trunk/doc/userman.md
    • 最近手作業で作ったダイアグラムを基準にすると、この一覧のツールは求める機能をすべて備えてはいなかった
      一覧の中で斜線を扱えるのは https://textik.com/ だけのように見え、それも塗りつぶし機能はなさそう
      そして描こうとしていたダイアグラムはこういう形だった: https://pastebin.com/NPXFS1Fi
      textik.com でボックスと三角形は作れたが、複数の角を手動で直し、内部も自分で塗りつぶす必要があった
      Monodraw がたった10ドルでも、Mac 専用のネイティブアプリなので購入するかは分からない
      Web で作業することが多く複数のデバイスを使っており、ダイアグラムは年に数回しか描かないので、Web ベースか VSCode プラグインのほうがよさそうに思える
    • https://fmhy.net の一覧も見てみる価値がある
      面白いツールがあるかもしれない
    • 一覧に入れる候補として https://mbarkhau.github.io/asciigrid もある
    • 数年前に簡単なツールを作り、今も https://letterbrush.com でホストしている
  • このツールが本当に気に入っている
    Mapless のダイアグラム作成に使った: https://sebastianconcept.github.io/Mapless/guides/2024/01/28...
    それから Pharo VM Plugin ビルダー設定の文書化にも使った: https://github.com/sebastianconcept/PharoPluginBuilder

    • ASCII 描画ツールでテキストダイアグラムを作って、それをスクリーンショットに撮って Web サイトに載せた、ということ?
      四角形をいくつか描くにはずいぶん遠回りに見えるけれど、もっと簡単な方法はないのだろうか?
    • ソースコードの文書化に使っていて、コード内でバッファや構造体のレイアウトを可視化できるので非常に良い
  • これがクロスプラットフォームなら本当にうれしい
    Linux でも使いたい
    完成度の高いアプリを作る労力は理解しているが、デスクトップアプリ向けのツールが Linux、Windows、Mac をもっと上手く対象にしてくれるといい
    Web ベースのアプリが増えている大きな理由も、おそらくこれだと思う

    • デスクトップアプリケーションで Qt がもっと使われていないのは少し意外
      この種のアプリには本当に向いている
  • 素晴らしいツール
    Web 版の代替として、友人が Kotlin で作った https://github.com/tuanchauict/MonoSketch がある
    私も Rust で、まだ完成度の低いバージョンを作ってある: https://github.com/huytd/ascii-d

  • よさそう
    https://asciiflow.com/ はWebベースの代替で、この10年ほど主に使ってきたツール

    • ASCIIFlowをいつも使っている
      ただ、ブラウザで等幅フォントを正しくレンダリングさせる方法はまだ分かっていない
      このページのサンプル図を見るとよい: http://uggly.bytester.net/#how-it-works
    • こうした図のテキストは、スクリーンリーダーでは読めないように見える
  • このツールは、たまにしか使わなくても買って手元に置いておきたくなる類のアプリ

    • 昔から使っているのか、それとも好きそうなソフトウェアのタイプだと推測しているのか気になる
      実際に使ったことがあるなら、作成した図をどう活用したのかも聞きたい
      図のスクリーンショットは想像できるが、元のテキストはターミナルのような場所に入れるには大きすぎそう
    • Webサイトのデザインもすっきりしている
  • このアプリは2018年にメンテナンスモードに入ったが、その後何か変わったのだろうか? https://blog.helftone.com/monodraw-maintenance-mode/

    • Monodrawの開発者です
      アプリへの好意的な反応に感謝します
      時間が極端に足りず、アップデートをもっと多く出せていません
      要望の多い機能をいくつか作業中ですが、いつ公開できるかは約束できません
      たいてい休暇中に少しずつ進めています
      それでもOSアップグレードで生じる不具合は引き続き修正し、製品が動き続けるよう保つつもりです
    • https://x.com/Monodrawを見ると、実際にアップデートはあったようだ
    • FAQ下部の回答が少し不思議
      オープンソースプロジェクトを維持するのは大きな負担であり、完成品をオープンソースとして公開すると、知らない顧客にクローンが販売されることがある、という理由を挙げている
      しかしオープンソース化すれば、コントリビューターが一部の作業を担えるし、特定のライセンスならそうしたクローン販売を防げる
  • 以前使ったことがあり、よかった
    記憶している不満点の一つは、アンカーやサイズ変更可能なボックスのような凝った機能を維持するには、独自の内蔵ファイル形式を使う必要があることだった
    Markdown文書内のASCIIアートを直接指したからといって、すべての機能が自動的に得られるわけではない
    本当に望むなら、賢いアルゴリズムとLLMである程度解決できるかもしれないし、実際にLLMをASCII図の下書き作成にかなり使って、ある程度うまくいった
    しかし、保守性、つまりボックスをボックスとして扱い、移動すると接続線も追従する性質と、可搬性、つまりすべてが純粋なテキストである性質との間で、よいバランスはまだ見つけられていない
    最新のMonodrawが違っていたり、別のツールがこれを解決しているならぜひ知りたい
    少なくともEmacsのartist modeよりはMonodrawのほうが自分には合っていた

    • 興味深い見方だ
      管理したい既存の図がたくさんあるのか気になる
      最初から作るなら、こうした抽象ファイル形式があることはむしろ期待どおりで、PSDのような元データとPNGのようなレンダリング結果の関係のように見たい
      あるいはソースコードとバイナリの関係にも似ている
      出力物を再び意味のある抽象形へパースするのは、完璧に行うのが難しいと思う