web-dev-qa-db-ja.com

html5 javascriptワークフローダイアグラムジェネレーター

私はhtml5 javascriptでワークフロージェネレーターを探しています

私にはいくつかのステータスがあるシステムがあり、それらのステータスはユーザーが変更できる特定のワークフローに従います。

ワークフローの視覚的表現を生成するシンプルなフレームワークを探しています

例：

  • 最初から処理まで
  • ソリューションからエンドへ、またはプロセスからエンドへ
  • ついに解決から終わりまで
javascripthtmlworkflowdiagram
13
Pascal

MxGraph（ www.jgraph.com ）を通過してください。これはHTML5/JavaScriptで、HTML 4ブラウザー用のフォールバックを備えています。 www.draw.io でテクノロジーを使用した例を見ることができます

12
KesaVan

より洗練されたソリューションを探している場合、商用シナリオでは、 yFiles for HTML を検討することをお勧めします。システムが非常に単純な場合、これはやり過ぎになる可能性がありますが、 jsPlumb のような単純なソリューションで十分な場合があります。

前者のライブラリは、あらゆる種類のユーザー操作とそのカスタマイズをサポートするだけでなく、独自の形状と視覚的表現を簡単に統合するためのサポートも提供します。

特にワークフローの視覚化では、 Sugiyama Layout の自動レイアウトアルゴリズムの実装が、より多くのワークフローアイテムを自動的に配置する必要がある場合に役立ちます。

Sugiyama example rendering created by yFiles

上の画像では、スイムレーンが追加されています。スイムレーンは、より複雑なワークフロー図では非常に一般的です。アルゴリズムは、形状、それらの接続、スイムレーンを自動的に配置できます。 このライブサンプルアプリケーション で実際の動作を確認できます

開示：私は、このライブラリを作成する会社で働いています。 SO私は私の雇用主を代表するものではなく、私のコメント、考え、投稿は私自身のものです。

4
Sebastian

私はいくつかのワークフロー、フローチャート、作図ツールを試しました。

ワークフロー図を作成し、サーバーとの間でデータをロードおよび保存できるものを見つけました。

これには、ワークフロー図の作成に使用できるほぼすべての機能があります。

1）長方形内のリッチテキスト。

2）形状をカスタマイズする機能。

3）フローチャートシンボルを追加し、バックエンドコードを修正する機能。

4）Android、iOS、HTML5ブラウザーで動作します。

5）さまざまな種類の線を追加して、さまざまな形状やオブジェクトに接続する機能。

MITライセンス。

https://code.google.com/p/svg-edit/

3
buttercup

これが私の2セントです。

GPLおよび/または商用バージョンが必要な場合は、Draw2d.org libを使用できます。これは、すぐに使用できるアプリケーションではなく、SDK評価者です。この場合、統合またはカスタマイズが可能です。

  • jSONの読み取り/書き込み
  • pNGまたはGIFを書き込む
  • ...
1
Draw2D touch