HN公開: Mermaidクラス図編集用GUI

 (docs.mermaidchart.com)
1 ポイント 投稿者 GN⁺ 2025-01-19 | 1件のコメント | WhatsAppで共有

Mermaidクラス図編集のためのGUI

  • Mermaidチャートの利点: 複雑な図をすばやく表現できるMermaidチャートは、最近のアップデートによりクラス図の編集がさらに直感的で簡単になった。新機能ではビジュアルエディタが拡張され、クラス図との直接的なインタラクションをサポートし、ユーザーが図の作成体験を向上できるさまざまなツールを提供する。

クラス図とは？

  • クラス図の定義: UML（統一モデリング言語）の一種で、システムの構造をモデリングし、クラス、属性、メソッド、オブジェクト間の関係を示す。オブジェクト指向設計における必須のツールであり、システムのさまざまな部分がどのように相互作用するかを可視化するのに役立つ。
  • 基本要素:
    • クラス: オブジェクトや概念を表す。
    • 属性: クラスの特性や属性。
    • メソッド: クラスが実行できる作業や演算。
    • 関係: クラス間の接続や相互作用を表す。

新しいビジュアルエディタツール

  • ツール紹介: ビジュアルエディタのツールバーでは、クラス図向けの複数の新しいツールが導入された。
    • 図のレンダリング方向の変更: 図のレイアウトを調整する。
    • 新しいクラスの追加: 図に簡単に新しいクラスを追加する。
    • タイトルとメモの追加: 図にタイトルを追加したり、特定のクラスに関連付けられていないメモを挿入したりできる。
    • 空の名前空間の追加: 特定の名前空間に属するクラスのプレースホルダーを定義する。
    • 図の設定を更新: 「空のメンバーボックス」の可視性などのオプションを切り替えて、すっきりした見た目を保つ。
    • テーマとレイアウトの変更: さまざまなテーマを選択し、図の外観を調整する。

新しいクラスと関係の作成

  • クラスと関係の作成方法:
    • 既存の関係から新しいクラスを作成: 図内の既存クラスをクリックした後、空白領域へドラッグして新しいクラスを作成し、元のクラスとの直接的な関係を設定する。
    • 既存クラス間の関係を作成: あるクラスから別のクラスへ関係線をドラッグして、すばやく関係を設定する。

クラス詳細の編集

  • クラス属性の修正: ビジュアルエディタは、コードを書かずにクラス属性を修正できる強力な対話型インターフェースを提供する。クラスの各属性を細かく設定できる。
    • 属性: 可視性修飾子の定義、データ型の設定、属性名の指定。
    • メソッド: メソッドの可視性設定、戻り値の型の定義、メソッド名とパラメータの指定。

図の最適化のための追加のヒント

  • さまざまなレイアウトを試す: レイアウトとテーマのオプションを活用して、図の最適な外観を見つける。
  • メモで文脈を追加: メモ機能を使って図の一部を説明し、複雑な関係を明確にする。

はじめに

  • Mermaidビジュアルエディタツールの活用: 新機能を試して、クラス図をより効率的で扱いやすいものにする。新しい図をゼロから作成する場合でも、既存の図を改善する場合でも、これらのアップデートによって時間と手間を節約し、システムの設計と構造に集中できるようになる。

関連記事

1件のコメント

 
GN⁺ 2025-01-19
Hacker News の意見

  • Mermaid 用のフロントエンドとしては、普段 Claude を使っています。複雑なアイデアを説明しなければならないとき、Claude が素早く作ってくれる図が説明をずっと簡単にしてくれます。
    Mermaid の有料アカウントもありますが、結局 Claude を一番よく使っているので、今でも Claude が最初の入口です。GUI に期待するのは、こうして作った簡単な図にスタイルや色を付けたり、自動配置より矢印が見やすくなるようにボックスを少し動かしたりする機能です。
    ブログを見ると、個々のボックスの 色とスタイリング を変える機能は省かれる可能性もありそうですが、コードで手作業すると一番時間がかかる部分なので、充実したツールがあるとよいです。

    • 興味深いですが、引っかかる点はなかったのか気になります。先週 Claude におもちゃの文法の 構文図 を作らせたところ、エスケープされていない特殊文字のせいで Mermaid ソースに構文エラーが出ました。
      Claude 自身に Mermaid ウィジェットがあるにもかかわらず、自分のコードのエラーを直させることができませんでした。

  • Mermaid 製品チームの Dominic です。現在の製品上の問題、改善要望、話したいことがあれば、dominic@mermaidchart.com までメールするか、カレンダーで時間を予約してください: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

    • Mermaid の図が Web ブラウザの外でレンダリング されるようになる時期が気になります: https://github.com/mermaid-js/mermaid/issues/2485
      KeenWrite(https://keenwrite.com/) という Markdown エディタを作っていて、三連バッククォート構文で図を埋め込めるようにしました。diagram- 接頭辞をパースして graphviz のような単語を Kroki(https://kroki.io/) に渡し、Kroki が Mermaid を含む複数の ASCII 図をレンダリングします。
      Markdown ではソースコード片は本来、三連バッククォートの後に言語識別子を付け、等幅フォントで表示する方式ですが、GitHub が Mermaid 図向けの事実上の標準を作ったことでこの慣例を壊してしまったのは残念な判断です。
    • ブラウザなしレンダリングの質問に同意します。これまでは Selenium の設定をヘッドレスビルド向けに調整しようとして失敗し、テキストも正しくレンダリングされませんでした。
      広く採用されようとするツールなら、PoC を超えた基本機能として ブラウザなしレンダリング が最優先であるべきだと思います。
    • 図の構成要素が互いに衝突しないようにする 配置制御 がもっと良くなるといいです。簡単な要望ではないでしょうが、誤って配置される構成要素にはかなり頻繁に遭遇しますし、これを解決できれば Mermaid の大きな強みになり得ます。

  • 最近これを使ってみて、最初は気に入りました。ChatGPT も Mermaid 図をかなりうまく生成しましたが、内蔵 AI 機能は試しませんでした。
    ただ、中程度の複雑さの図を作ったあと、Whiteboard 機能で直接ドラッグしてレイアウトを改善しようとしたところ、大きく不安定になりました。望む位置に整理したりドラッグしたりするのがうまくいかず、重なりも解消しにくかったです。一部の図タイプが Whiteboard に対応していないのも残念でした。
    mermaidchart.com と mermaid.live の機能差も混乱します。競合製品なのか、似たアプリのバリエーションなのかわからず、“Playground” と “Live Editor” という名前も紛らわしいです。それでも存在自体はうれしく、今後も改善されることを願っています。

    • Mermaid の CEO です。Whiteboard はまだ初期段階なので、今後数か月でかなり改善される予定です。
      mermaidchart.com と mermaid.live は同じチームが運営しています。Mermaid.live は 10 年続くオープンソースプロジェクトの元々のエディタであり、完全にオープンソースでホストされているエディタです。
      Mermaid の創始者が最近、GitLab CEO のベンチャースタジオとともに mermaidchart.com を作り、より多くのユーザーとエンタープライズ級機能に向けて拡張しています。会社は オープンコア でベンチャー投資を受けていますが、Mermaid プロジェクトは今後もオープンソースのままで、投資も続ける予定です。
    • 望む方法ではなく Mermaid が「望む」方法でしか配置されないのは、Mermaid の根本的な問題 かもしれません。以前から巨大な空白ができ、望みどおりのレイアウトにするのが難しかったです。

  • 自動レイアウトアルゴリズムのあるダイアグラムツールは、主にデバッグ用の可視化をプログラムで作るときにだけ使っている。ドキュメント化が目的なら、OmniGraffleで手で描くほうを好む
    graphvizのようなツールでグラフをきれいに作るのは非常に複雑で、結局は望む見た目にするために機能を抜け道的に乱用することになる
    本当に必要なのは、可読性と美しさを考慮できる機械学習ベースのグラフレイアウトアルゴリズムだと思う。これまで見つけたものは大規模グラフの表示寄りで、別分野に近かった
    MermaidがUI上で発生するすべての編集ポイントを収集しているなら、かなり良いデータセットになりそう

    • そうしたレイアウトエンジンを作って販売しており、ここで試せる: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
      もっと大きな例はこちら: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
      競合の記事で自己宣伝するのは好きではないが、Mermaidが自前のレイアウトエンジンを作る方向とは競合しないので、この文脈では関連があると思う
    • この分野を調べていて見つけた興味深いリンク。Graphvizに似た汎用グラフ描画ライブラリで、オプションと制御がより多いELK: https://eclipse.dev/elk/
      ELKを開発したKiel Universityチームの実験: https://github.com/kieler/KLighD
      KielerプロジェクトのWiki: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
      制約ベースのグラフ描画ライブラリ: https://www.adaptagrams.org/, JS実装: https://ialab.it.monash.edu/webcola/
      そのほか、HOLA論文 https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf、Confluent Graphsデモ https://www.aviz.fr/~bbach/confluentgraphs/、直交レイアウト論文 https://arxiv.org/pdf/1408.4626.pdf、パワーグラフ圧縮論文 https://arxiv.org/pdf/1311.6996v1.pdfも一見の価値がある
    • Mermaid製品チームのDominicです。Whiteboardは、ユーザーが望む正確なレイアウトを得られるよう支援するためにリリースしましたが、まだ初期段階なので多くを改善中です
      自動レイアウトアルゴリズムがスピードを生み出すMermaidの大きな魅力だという点は理解していますが、現在のレイアウトはやや複雑に絡まることがあります
      機械学習モデルというアイデアは興味深く、読みやすく見栄えのよいダイアグラムの基本要件が何なのか気になります。たとえば、エッジは直角であるべきか、丸みを帯びるべきか、といった基準があり得ます。考えを共有していただけるなら、dominic@mermaidchart.com までメールしてくださいとのことです
    • コードでダイアグラムを書く構文に、レンダリング制約を定義する構文を組み合わせたツールを作っている。たとえば、この部分はあの部分の左側にあるべきだとか、この矢印はあの矢印と交差してはいけない、といったもの
      一貫したダイアグラムのレンダリングと、最後の1ピクセル単位の微調整を大幅に簡単にできればと期待している。現在、Cassowaryを使うレンダラーのごく初期のアルファ版は動作しており、良いGUIを作っているところ

  • “Create your account”で一気に興味が失せた。アカウントを作る前にエディタを試せて、気に入るまではブラウザのローカルストレージに保存できるとよい

  • Mermaidがどんどん良くなっているのはうれしい。シーケンス図は https://sequencediagram.org/ が最高だと思う。関係者ではなく、満足しているユーザーにすぎない

    • 以前、共同作業のダイアグラムセッションで使ったことがあり、簡単でシンプルなのが良かった。ただしMermaidの核心は移植性にある。Markdown文書に埋め込み、さまざまなエディタやプラットフォームで見られる点が重要
    • Mermaid Chart製品チームの立場では、Mermaidのシーケンス図機能もかなり光っていると思う。https://sequencediagram.org/ がMermaidのシーケンス図より優れている点が何なのか気になる
    • 他のエディタも使ってみたが、結局いつもsequencediagram.orgに戻ってきた。ただうまく動き、手間が少ない
    • MermaidChartのシーケンス図エディタはsequencediagram.orgより優れていると感じる
    • sequencediagram.orgはおそらくPlantUMLを使っているようなので、Webサイトなしでもローカルで同じ作業ができる

  • 哲学が違うのは理解しているが、MermaidをLaTeXの中で使える日が来るといい。少なくともMermaidをTikZへ安定して変換するツールがあれば、スライドの準備がずっと楽になりそう
    PNG/JPGへのエクスポートもできるが、たいていカスタマイズ性を大きく失い、ページに合わせるためにサイズを拡大・縮小する程度しかできない
    昨日これを調べていて、今回の記事で紹介されている新しいGUIも見かけたが、結局PNGでエクスポートしてからBeamerのページレイアウトに合わせるのに苦労した

  • Draw.ioはMermaidダイアグラムを埋め込めるし、VSCodeや各種IDEプラグインもあるのに、これの何が特別なのか気になる

    • Draw.ioのMermaid連携やVSCode/IDEプラグインは良いが、主にダイアグラムのプログラム的な編集を支援するもの
      Mermaid Chartの差別化ポイントは双方向編集。コードを修正してダイアグラムを変えられるし、ダイアグラムを直接変更すると、その変更が自動的にコードへ反映される
      現在この双方向編集はクラス図とフローチャートで利用でき、今後ほかの人気のあるダイアグラム種別にも拡張する予定
    • 競争はイノベーションに良いし、選択肢があるのは誰にとっても良いこと。必ず特別である必要があるだろうか？

  • 「Theme Customization in Toolbar」の画像がレンダリングされない

  • プロジェクト自体は素晴らしいが、哲学的な面では疑問がある
    MermaidはダイアグラムにおけるMarkdownになろうとしているもので、プレーンテキストで編集し利用できることが最も重要。ビジュアルエディタを使う必要があるなら、なぜもっと強力なツールを持ってきて、制限のある形式から抜け出さないのか分からない
    これはWYSIWYG Markdownエディタに似ている。もちろんニッチな市場はあるだろうが、それならGoogle DocsやMS Wordを使えばいいのでは、と思う