Markdown風テキストでダイアグラムが描けるWebツール - Qiita
MarkDownDiagram Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。 こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 特徴としては Webブラウザのみでローカルで動作 配置はマウスでドラッグして編集できる CSSで色や装飾を制御可能 といったあたりです。 githubからclone/ダウンロードして使えます。 オンラインで試すのはこちらでどうぞ。 ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。 Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。 機能 テキストでブロックを記述し、ブロック間を線で繋ぐ描画 ブロックをマウ
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
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
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にしてあげるだけ。
【レビュー】申し分なし! Web版ドローツール『Cacoo』の使い心地 - リアルタイムコラボにもおすすめ! | ネット | マイコミジャーナル
Webサイトのデザイン、社内のネットワーク図、オフィスのレイアウト図、UMLなどドローツールに対する需要は高い。いくつかのローカルアプリケーションが存在するが、もっとも有名な Microsoft Visio は高価であり、利用頻度によってはコストメリットが出ない場合もある。またオープンソース・ソフトウェアやフリーウェアにもいくつか存在するが、オブジェクトが足りなかったり使い勝手の面でいまひとつなものも少なくない。 さらに最近では一人ですべてのドローを作成するのではなく、複数人で図の共有や編集を行なう需要が出てきている。その場合、ローカルアプリケーション型は、コスト的にも共同編集の面でも選択するのは難しい。そこで注目を集めているのがオンラインのドローアプリケーションだ。 今回は『Cacoo』というWebアプリを紹介したい。ヌーラボによる日本語向けのドローアプリケーションだ。 「Cacco」の
Lovely Charts : いろいろなチャートが簡単に作成できるサービス
Lovely Charts : いろいろなチャートが簡単に作成できるサービス Lovely Charts Lovely Chartsは誰でも簡単に見栄えのするチャートの作成ができるサービス。 以前に紹介した同類のサービス、LucidChartをさらに使いやすくした感じのサイトです。 チャートの作成画面に入ると、まずは作成するタイプの選択画面が現われますが、あとでも自由に変えられるので、ここでは適当に選択しても構いません。 操作は実にシンプルで、これこそがこのサイトの優れたところと言えます。 操作ツール(1)は、オブジェクトを移動するためのものと、オブジェクトから線を延ばすためのものの2種類。 タイプ別に分類されているオブジェクトをパレット(2)からドラッグして並べていき、大きさを調整していきます。上部メニュー(4)から各オブジェクトの色も簡単に指定できます。 オブジェクトをダブルクリックす
無料で使えるワイヤーフレームツールのまとめ : could
ソフトウェアワイヤーフレーム 無料で使えるワイヤーフレームツールのまとめ Firefox 上で動作するワイヤーフレームツール Pencil をはじめ、無料でしかも便利なツールが増えてきました。紙とペンでワイヤーフレームを描くのは基本ですが、より本物に近いプロトタイプを作るのであればソフトウェアを使うのが最適です。以前紹介した「プロトタイピングの基礎の基礎」も併用に読んで今回紹介するツールの中から自分に合ったツールを探してみてはいかがでしょうか。 DIA: a drawing program UMLダイアグラムに特化していますが、ワイヤーフレームも作れます。基本的にデータは XML で保存されますが、EPS, SVG, PNG といった別形式にも書き出せます DENIM タブレットで操作すると快適そうなプロタイピングツール。サイト内をどのように移動するかを確認するには使えそうです OpenO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Are statecharts the next big UI paradigm?
How to model the behavior of Redux apps using statecharts
ASCIIFlow
yEd Graph Editor
Alexis-benoist/eralchemy: Entity Relation Diagrams generation tool
GitHub - hirokidaichi/uiflow: uiflow - the simplest way to write down your ui-flow diagram like markdown