preタグに書いたデータをダイアグラムとしてビジュアル化するスクリプト・「Pinker.js」
Pinker.jsはpreタグに書いたデータをcanvasにダイアグラムとして描いてくれるスクリプトです。 特定のルールに沿った書き方をpreタグにする事で簡易的なダイアグラムを生成できる、というもの。割と複雑なものも書けるみたいです。 以下動作サンプルです。 動作サンプル 左のpreタグのテキストを元に右のcanvasタグにダイアグラムが生成されています。 使い方Pinker.jsを読み込みます <script src='Pinker.js'></script>preにルールに沿った記法で書き、idを振ります。Layout:で位置を決め、Relate:で関係性を設定します。 <pre id="Source01">Layout: [A] [B][D][E] [C]...[F] Relate: [B]->[A],[C] [D]->[B],[E],[F] </pre>canvasを
Atomでフロー図っぽいのを書く - Qiita
きっかけ ちょっと大きな規模の開発になった時に、頭がおかしくなりそうになったので一旦アウトプットしようということで ドローイングツールを探してたら普段利用しているエディタのAtomでUMLっぽいの書けるじゃんということになりました。 導入ツール 説明不要のエディターですね => https://atom.io/ plantuml-viewer atomプラグインのplantuml-viewerを使用します。 使用するのに java Graphviz が必要とのこと。下記の記事が詳しいです。 参考: テキスト入力でUMLをライブプレビューしてくれるツール（plantuml-viewer:Atomプラグイン） - Qiita language-plantuml PlantUMLのサポート用に上記のatomプラグインも入れました。 使ってみる PlantUML - シーケンス図 | プログラマー
ビジュアル仕様書共有ツール Zeplin でアプリ開発が爆速になった - Qiita
デザイナーが作ったデザインをエンジニアがコードに落としこむ工程，コミュニケーションコストも大きくなかなか大変ですよね．そんな課題を解決してくれる，ビジュアル仕様書共有ツール Zeplin を使ってみたところ非常に好感触で，アプリ開発がかなり効率化されたように思うので，普及もかねてまとめてみようと想います． Zeplin は何を解決してくれるのか これまでアプリ開発の際，デザイナーさんに以下の様なビジュアル仕様書を Google Drive で共有してもらっていました． 自分はデザイナーさんみたいに 1px の細かい差異など分からなかったりするので，このようなビジュアル仕様書を作成してもらえると，正しく実装することができ非常に助かります．しかし，これには例えば以下のような課題がありました． (1) デザイナーさんのコストが大きい．上図の例はアプリの 1 画面に過ぎませんが，これが 10 枚，
Open-source tool that uses simple textual descriptions to draw beautiful UML diagrams.
🌱 PlantUML at a Glance 🚀 Getting Started PlantUML is a highly versatile tool that facilitates the rapid and straightforward creation of a wide array of diagrams. Utilizing a simple and intuitive language, users can effortlessly draft various types of diagrams. For a detailed exploration of the language's capabilities and syntax, please refer to the PlantUML Language Reference Guide. If you are n
erd – ER図を作成するコマンドラインツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました データベースのダイアグラム（ER図）を作成する Haskell 製のコマンドラインツールです。テキストエディタで定義ファイルを作成し、コマンドを実行することでダイアグラムとなる画像を作成します。データベースを設計する際、テーブルとその関連付けについて全体像を手早く作成したい、そんな時に便利なソフトウェアです。 erd の主な特徴 1) データベースの全体像の設計に集中できる ダイアグラムにあるテーブル同士の配置など気にすることなく、とにかく全体的な設計を行いたい時に便利です。GUIツールも便利ですが、使い慣れたテキストエディタで、キーボードから手を離すことなく、思うままに設計を進めることができます。 2) er ファイルが必要 er ファイルと呼ぶ定義ファイルを作成します。このer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
