Nomnoml: テキスト文法で描くUMLダイアグラム

 (nomnoml.com)
2 ポイント 投稿者 GN⁺ 2023-10-03 | 1件のコメント | WhatsAppで共有
  • UMLダイアグラムをコードのように記述するツールで、左側のテキスト文法を編集するとレンダリングされたダイアグラムも一緒に変わる
  • クラス、コンポーネント、フローチャート、ユースケース、データベース・テーブルなど、さまざまなダイアグラム要素と関係線の表記をサポートする
  • 編集内容はブラウザーのlocalStorageに保存され、次回訪問時にも残ることがあるが、保存は保証されない
  • キャンバスは右側1/3の領域でドラッグとスクロールにより移動・拡大/縮小でき、エディターはSublime Textのキーマッピングの一部をサポートする
  • #ディレクティブと.スタイルディレクティブで、フォント、方向、間隔、色、線の形、ユーザー定義分類子スタイルを調整できる

テキスト文法で構成するダイアグラム

  • Nomnomlはテキストベースの文法でダイアグラムを記述し、レンダリングするツール

  • 関係線の表記

    • association、dependency、generalization、implementation、composition、aggregation、ball and socket、note、hidden などを使用できる
    • 例: [Car]->[Engine]
    • 例: [Car] +-> 0..* [RustPatch]
    • 例: [Car]o->[Manufacturer]
    • 例: [Car]<:-[Pickup]

  • サポートされる分類子

    • クラスダイアグラムでは基本クラスに加えて abstract、instance、reference、package、frame をサポートする
    • コンポーネントダイアグラムでは socket、lollipop 表記を使える
    • フローチャート要素として start、end、state、choice、sync、input、sender、receiver、transceiver がある
    • ユースケースダイアグラムは actor、usecase をサポートする
    • その他の要素として note、label、hidden、database、pipe、table を使用できる
      • テーブルの例は [<table>Fruits| Apples | 17 || Oranges | 4711] の形式

編集、ディレクティブ、スタイル

  • 行頭の // はコメントとして扱われる
    • [not //commented] のように行の途中にある // はコメントではない
  • id 属性を使うと、表示名が同じ2つのノードを別々のノードにできる
    • 例: [<actor id=a>User]、[<actor id=b>User]、[a] -- [b]

  • #ディレクティブでレイアウトとレンダリングを調整

    • #import: filename
    • #direction: down | right
    • #edges: hard | rounded
    • #background: transparent
    • #font、#fontSize、#spacing、#padding、#stroke、#fill、#zoom
    • #ranker: network-simplex | tight-tree | longest-path

  • .ディレクティブで分類子スタイルを定義

    • 例: #.box: fill=#8f8 dashed
    • 例: #.blob: visual=ellipse title=bold
    • fill、stroke、align、direction、visual のようなキー/値を使用できる
    • title=left,italic,bold、body=center,italic,bold のようにタイトルと本文テキストのスタイルを指定できる
    • 使用例にはフォント変更、詰まったレイアウト、テーブル作成、ユーザー定義スタイル、複数ファイル分割が含まれる
    • 複数ファイル分割は #import: blobby_styles 形式を使用する
    • 編集画面の変更内容はブラウザーのlocalStorageに保存され、キャンバスは右側1/3の領域でドラッグとスクロールにより移動・拡大/縮小できる
    • エディターはSublime Textキーマッピングの一部をサポートし、Nomnomlは GitHub でホスティングされている

関連記事

1件のコメント

 
GN⁺ 2023-10-03
Hacker News のコメント

  • GitHub リンク: https://github.com/skanaar/nomnoml

  • 最初はかなり混乱したが、about ボタンを見つけてようやく理解できた
    UML を一目で認識できないという点では、運よく生きてこられたのかもしれない。最初は偽の海賊口調の文法みたいなものを説明しているのかと思った

    • UML を見分ける方法は、誰も覚えていない矢印スタイルが大量に出てくること。これが UML が広く定着しなかった主な理由だと、9割くらい確信している
      UML ダイアグラムを読むために10種類の矢印を覚える人などいない、という事実を認めたこういう方式のほうがずっと良いと思う: https://buck2.build/docs/concepts/concept_map/
    • これは厳密には標準 UMLではないと思う
      ただし「UML」という言葉を使うツールの多くがそうだし、実際には理論上の UML よりも、精密さや冗長さを抑えたものが必要になる場面も多い

  • 以前、「テキストをダイアグラムに」変換するツールを比較したオープンソースのサイトがあった: https://text-to-diagram.com/
    nomnoml は一覧にない

    • そのサイトはD2 のメンテナーたちが作ったものなので偏りはあるかもしれないが、それでも D2 の文法は nomnoml も含めたこの系統の中で最も親しみやすいと思う
      [1]: https://d2lang.com/

  • Nomnoml が好き。最近は、作業中のブラウザベースの**個人知識管理（PKM）**プロジェクトで、階層型タグ構造を可視化するのに使っている
    レイアウトはかなりきれいに出るほうだ。例: https://imgbox.com/9A1mDyNv

  • モバイル周りは手を入れる必要がありそう。スマホで開いたら、ダイアグラムがエディタの上に描画されてエディタを使えなかった

    • それは nomnoml のデモ Web サイトの挙動にすぎない。テキストを編集すると、レンダリングされた UML ダイアグラムがリアルタイムで変わることを見せるための構成だ
      下層の JavaScript ライブラリは、HTML canvas や Node.js プログラムから SVG に直接レンダリングでき、必要ならコマンドラインからも実行できる

  • 以前 nomnoml でいくつかツールを作ったことがあり、GPU アセンブリコードの制御フローグラフや依存関係グラフも含まれていた
    本当に気に入っていたが、特定の要素同士を近くに配置するよう安定して強制する方法がない点は残念だった。非常に大きなダイアグラムでは、ときどき悪い選択をしてごちゃごちゃになる
    ドキュメントが完全ではなくてもコードはかなり修正しやすく、マウスオーバー時にツールチップを表示したり、特定のボックスをクリックすると別のダイアグラムへリンクするようにハックできた。こういう良いツールがオープンソースなのはありがたい

  • 良いレイアウトを得るのが定義順序に依存しすぎている。大きなダイアグラムではユーザーが解決するのが難しくなり得るが、小さなダイアグラムでは問題なさそう
    たとえば同じ海賊の例を別の順序で書くと、有効ではあるものの見栄えの悪いレイアウトになる

    • こういうツールの問題は、ドキュメントでなんとか良いレイアウトを得ても、何かを追加・削除・修正した瞬間にまた格闘しなければならないこと
      ダイアグラムまで含めた技術文書がプロジェクトのソースコードの一部になる世界を夢見て、こうしたコードベースのダイアグラム製品をいくつか使ってみたが、特に外部配布用はもちろん、内部用でさえ許容できるレイアウトを得るのは難しかった
      その挫折はたいてい2つの悪い結果につながる。ダイアグラムが読めなくなるか、保守されなくなるかだ
      正直、チェックイン時に文書をコードレビューするという発想も神話に近い。こうした文書の diff は非常に理解しにくく、レンダリングして成果物を見ない限り、文書が正しいかを意味のある形で確認するのはほぼ不可能だ
      本当にうまくいってほしい種類の問題で、いつかは解決済みの問題になるかもしれない
    • 訂正: 上から下へ配置されると思っていたがそうではなく、順序は別の方法で決まる
      元の Pirate の表と親コメントの Pirate の表を比べると上下が反転している。beard と parrot を望む表示順で先に定義しても、やはり反転して表示される
    • 結果のダイアグラムで重なりが最小になるように文の順列を最適化してくれる、さらに別のツールが必要だ
    • この海賊の例は理解の助けにならない。このごちゃ混ぜの単語を意味が通るように並べる方法があるのか気になる

  • 見た目がよく、PlantUML のクラスダイアグラムよりずっと良さそう
    [0]: https://plantuml.com/class-diagram

    • そうかもしれない。ただ、さらに別の断片化した標準を作るより、すでにかなりサポートされている標準のデフォルトスタイルをもっと見栄えよくできないものかと思う
    • PlantUML は、私が最もよく使うダイアグラムの1つであるシーケンス図をサポートしている。残念ながら nomnoml はサポートしていない

  • graphviz を思い出す