Pyagram - システム全体の状態遷移図を描く
システム開発において全体増を把握するというのはとても大変なことです。しかし全体が把握できないままに開発を行っていくと余計な不具合が発生する可能性があります。とは言え、これまでのシステム全体図は分かりづらいものが多かったでしょう。 そうした悩みを抱えている方はPyagramを使ってみましょう。テキストで状態遷移を書きつつ、最終的に一つの画像にしてくれます。 Pyagramの使い方 出力例です。画面、アクション、メソッドなどが分かりやすくなっています。 画像はPNG/GIF/SVGで出力できます。 日本語も使えます。 Pyagramを使えば複雑なシステムであっても一つの画像の中に表現できます。どの画面とどの処理とが繋がっているかを把握できれば矛盾を見つけたり、より効率的な処理を思いつけるでしょう。 PyagramはPython製、MIT Licenseのオープンソース・ソフトウェアです。 vi
electron-viz - GUIのGraphvizチャートエディタ&ビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Graphvizを使うとノードを使ったフローチャート、クラス図をはじめ様々なチャートを画像にすることができます。ただし最初に環境を整えるのが手間であったり、dotファイルを書いた後にコマンドで変換しなければなりません。 そんな手間暇を軽減してくれるのがelectron-vizです。Electronで開発されており、GUIでGraphvizを編集できます。 electron-vizの使い方 electron-vizのメイン画面です。左側がエディタ、右側にチャートが描かれます。 例えばこのような図を描きました。オートプレビューが有効になっていれば編集した直後にチャートが描かれます。チャートの内容はGraphviz チュートリアルよりお借りしました。 二つに分かれるサンプル。 さらに複雑
MarkDownDiagram - Markdown風記法を使ってダイアグラム作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownが流行ると、Markdown風の記法を用いることでユーザの導入障壁を下げることができます。また、パーサーも多いのでそうしたライブラリを使うことで簡単にMarkdown風の記法が使えるようになります。 今回紹介するMarkDownDiagramもそんなMarkdown風記法を使ったソフトウェアの一つです。ダイアグラムをテキストで書けます。 MarkDownDiagramの使い方 メイン画面です。左側のエディタ部を編集すると右側のダイアグラムに反映されます。 ブロックという文字に変更してみました。 ブロックの位置はドラッグ&ドロップで変更できます。 線の色や太さを変えることもできます。 ズームもできます。 MarkDownDiagramを使えばダイアグラムを作成するのが
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
js-sequence-diagrams by bramp
This should be a diagram! If you don't see it you need Javascript enabled Intro A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image. Examples
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
20+ JavaScript libraries to draw your own diagrams (2022 edition)
20+ JavaScript libraries to draw your own diagrams (2022 edition) by Hamza Ed-douibi | Feb 23, 2022 | tools, cloud & web engineering, Model-driven Engineering | 52 comments You can render anything you want in your browser with JavaScript. Good examples are this list of online modeling tools that help you to easily create UML (or ER, BPMN, …) diagrams directly in the browser. Most of these tools u
Build Interactive Diagrams for the Web | GoJS
Build diagrams for the web in JavaScript and TypeScript GoJS is used to create interactive diagrams to visualize, monitor, and edit your systems. Org charts Create classic org charts. Leverage GoJS to allow users to easily interact with their org charts, editing relationships, collapsing levels, and more.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
