JavaScriptの既存のクラスのUML図を生成するツール

Question

プロジェクトが成長し、プロジェクトに存在するクラス間の関係を視覚化する必要性が現れました。それらの一部は独立しており、一部は他から継承されています。

これらの関係を視覚化するツールを探しています。私は同様の質問がすでにここで尋ねられていることを知っています MLクラス図を描画するためのJavaScriptライブラリ 、しかし、懸念できる限り、私のニーズに合った答えは与えられませんでした。

私はこれを知っています 統一モデリング言語ツールのリスト しかし、それらはUMLダイアグラムを描く可能性を与えているようですが、私が必要なのは

1. スタンドアロンツール
2. クラス定義のjavascriptコードからUML図を生成する

Rubyでは、このツールはRailRoadyと呼ばれます。このようなツールがJavaScriptでも終了する場合は、非常に役立ちます。

Answer 1

見て

James Shoreオンラインビューアー 。これは、Javascriptで会ったclosestUMLクラス図です。これは link も役立つかもしれません。実際、UMLクラス図を表す別のアプローチをもたらします。

Answer 2

JavaScriptには明確に定義されたクラスコンセプトがないため、このようなリバースエンジニアリングツールが存在することはほとんどありません。異なるフレームワークと異なる人々は、インスタンスを生成するためのクラスのようなブルー​​プリントとして機能するJavaScriptオブジェクトを実装するために異なるコードパターンを使用します。

ES6クラス定義の場合、UMLクラスモデルを自動的に生成し、いくつかのグラフレイアウトアルゴリズムを使用して、対応するダイアグラムを自動的に生成します。

Answer 3

いくつかの静的解析ツールは、あなたが達成しようとしていることを助けるかもしれません。私は品質管理のためにほとんどjscomplexityプロジェクト（jscomplexity.org）を使用していましたが、より高度なTAJSプロジェクトを覚えており、プレゼンテーションを見ましたPDF at http://cs.au.dk/~amoeller/talks/TAJS2.pdf そしてスライド9を見ると、JavaScriptの抽象状態の出力は、あなたにより適しているようです。要件。

TAJSのソースコードはgithub（ https://github.com/cs-au-dk/TAJS ）にあるため、使用したい場合は可能なはずの部分（ライセンスが許可する場合）。

著者は、コールグラフまたはコードの階層を表示するEclipseのプラグインもリリースしました。

これが少し役立つことを願っています。

Answer 4

UMLクラス図を生成するためのライブラリがいくつかあります（オンラインサービス、エディター、Webアプリケーションではありません）。主な問題は、グラフィカルコンポーネントの設計と図の応答性のレベルです。

静的なダイアグラムコンポーネントを作成する場合はライブラリがたくさんありますが、ランタイムグラフエディターに似たツールを作成する場合は、選択肢が制限されます。

• mxgraph は、 draw.io のような独自のグラフエディターを構築する場合に使用します。グラフはレスポンシブでインタラクティブであり、ユーザーはブロックの移動またはサイズ変更、テキストの変更、関係の追加または削除を行うことができます。

• gojs は商用ライブラリであり、アカデミック目的で利用可能な無料ライセンスによって提供されます。これは、ダイアグラムエディタを作成する場合にも適しています。ブロックを移動したり、テキストや関係を変更したりするための対話型の既製のダイアグラムがたくさん用意されています。他のさまざまな図のその他の多くの機能。

• JointJsコアライブラリ はMozilla Public Licenseの下でのオープンソースです。つまり、著作権を含める必要がありますが、商用目的で使用できます。 jQuery 3.1.1、Lodash 3.10.1、Backbone 1.3.3に依存しています。 （ Rapppid はこのライブラリを使用しています）すぐに使用できる多くのダイアグラム要素を提供します。これらはレスポンシブでインタラクティブです。ユーザーは、ブロックの移動、関係とジョイントの追加と削除、ズームインとズームアウトができます。

• Draw2D は、図面、図、またはワークフローのようなVisioを作成するためのライブラリです。コミュニティ版は、購入するのにほぼ5ユーロです。実際に、ブロックやダイアグラムのようなVisioを提供します。これらは、ブロックのサイズ変更、移動、テキストとリレーションシップの変更、ブロックのグループ化、ズームインとズームアウトをインタラクティブに行います。これは、グラフエディタツールを構築するのに適した選択肢です。 

• mlCanvas テキスト情報からUML図を提供するjsライブラリとしてのChristophe VGによる。ダイアグラムは、ブロックを移動できる方法で応答します。関係線は、デザインをきれいに保つためにスマートです。しかし、それ以上ではありません。 

• PlantUML は、jQueryライブラリによるテキスト情報からUML図を提供できるUMLツールです（他の言語のライブラリも利用可能）が、図は応答しません。

• Raphaël は、Web上のベクターグラフィックスでの作業を簡素化できる小さなJavaScriptライブラリです。これはグラフエディタを作成するのに最適なツールではありませんが、シンプルなユーザーインタラクション（動きや曲げなど）のために光沢のある美しい図を提供します

D 、 FabricJS 、 paperJS 、 JsPlumb 、 p5.js などの他のライブラリ、 Cytoscape.js および mermaid も図の基本的なコンポーネントを提供しますが、組み込みのエディターはありません。ただし、これらのライブラリには、さまざまなチャートおよび描画コンポーネントが用意されています。ユーザー向けの完全にインタラクティブで編集可能なダイアグラム（グラフエディターを含む）を作成するのに最適なオプションではない場合があります。