こんにちは、初めまして、フロントエンドエンジニアの八木です。 普段、モノタロウのECサイト開発を行っています。 エンジニアだとシステム構成図やシーケンス図など、何かと図を作る機会が仕事柄たくさんあります。その多くは要件定義や詳細設計などのフェーズで、人に何かを伝えるために使われます。 最近では、テック系のイベントやセッション登壇などでも使われる機会が多く見られるようになってきましたね。 エンジニアが図を用いる理由 図を用いる理由は文字だけでは直感的に伝わりづらいなど様々ですが、共通して言えることはビジュアライズすることによって皆が同じ認識を持つことにあります。 しかし、人によって描き方が異なっていたり、描き方に正解はないことから個人の解釈にずれが発生することが多々あります。 例えば以下の例を考えてみます。 伝えたいことは次の通り。 WebサーバーはNginxを使用 Appサーバー上ではDo
Diagram Maker: Open sourcing IoT visualization | Amazon Web Services
AWS Open Source Blog Diagram Maker: Open sourcing IoT visualization Today we are announcing Diagram Maker, an open source graphical user interface library for IoT application developers. With Diagram Maker, IoT application developers can define their own user interface and user experience, or suppress it completely and build their own custom behavior using Diagram Maker APIs. In this post, we expl
わたしの働くプラント・エンジニアリングの業界には、通称「P&ID」と呼ばれる図面がある。正式にはPiping & Instrumentation Diagram。日本語に訳せば『配管計装図』だが、そう日本語で呼ぶ人はおらず、普通は「ピーアイ」と略す。いわゆる化学プラントの基本設計を表す図面であり、そこに構造も要素も制御もすべて書かれている。きちんと描かれたP&IDがあれば、どんな機器構成からなり、どんな働きをするのか、ほとんど全て見て取れてしまう。プラントがほぼ作れてしまうと言ってもいい。だからどこの会社でも機密扱いになっている。P&IDがどんなものか、サンプルをお見せできればいいのだが、そういう訳でわたしも勝手に開示できないので、せめてたとえば以下のサイトを見て雰囲気をご覧いただきたい。
インタビューや観察の結果を整理する方法として「親和図法（affinity diagram）」がよく用いられます。また、そこからチームでアイデアを出す方法として「ブレインストーミング（brainstorming）」が用いられます（そこから再び親和図法に戻ることもありますね）。いずれも有名な手法なので詳細は省きますが、付箋紙をホワイトボードにペタペタ貼りながら、みんなでワイワイやるようなイメージです。 https://www.flickr.com/photos/jakecaptive/49915119よく用いられるからには、きっとそれなりの理由があるのでしょう。ですが、私はいずれに対しても（めちゃくちゃ）懐疑的です。使っていないわけではないのですが、使ってもいまいち感が残るというか、まるでうまくできる感じがしないのです。こんなのでいいアイデアなんか思いつくはずがない。それこそ「机上の空論」みた
複数ノードのパケットキャプチャファイルからシーケンス図を出力するツールを作成した 1. 概要 ネットワーク上の複数ノードで、Wiresharkやtcpdumpで同時にパケットキャプチャしたファイルからパケットのシーケンス図をPNG形式で出力する packetseqというツールを作成した。 言語はPython、Seqdiagというシーケンス図を作成するライブラリを使わせていただいた。 ※ GitHub上にコードを上げました（2016/10/6） ※ PyPIに公開し、pip等でインストール、コマンド実行出来るようにしました（2016/10/10） 1-1. ツール作成の背景 会社でお客さん環境のネットワーク遅延の調査のため、各通信ノードで採取したパケットの突き合わせを行った。 パケットはpcap形式のためwiresharkで閲覧、はじめは複数Wiresharkを開き目で突き合わせを行ったが無
先日状態遷移図を自動生成するPyagramというコマンドラインツールを作ったのですが、それの追加機能としてCREATE TABLE文からテーブル間の関連のみがわかるシンプルなER図を自動生成する機能を実装しました。 個人的には外部キーは一切使わない派なので、MySQLWorkbanchを使った場合にテーブル間のリレーションが張られた状態のER図が生成できない問題がありました。そのため外部キーがなくてもカラム名から親子を推測して関連づけてくれるようなツールを作ることにしました。 利用にあたりいくつか制約がありますので、以下をご理解いただいた上でご使用ください。 MySQLのみ対応 主キー名は常にid テーブル名は基本的に複数形（中間テーブルを除く） いくつかのデータ型には未対応（ENUMなど） また検証がまだ不十分かもしれませんので、もしかしたらうまく動かないことがあるかもしれません。コメン
PlantUML とは テキストベースでUMLのダイアグラムをサクサクかける ドメイン固有言語(DSL)です。 以下のような特徴があります。 テキストベースなので、バージョン管理ツールでの差分管理が可能 図のレイアウトを自動でやってくれるので、書きたい内容に集中できる PNGでの出力以外に SVG、EPS 等のベクタ形式での出力が可能 参照 Open-source tool that uses simple textual descriptions to draw UML diagrams. ⇒ PlantUML 公式サイト。リファレンスマニュアルがpdfファイルで公開されています（PlantUML_Language_Reference_Guide.pdf） http://plantuml-ref-ja.github.io/ ⇒ リファレンスマニュアルを日本語訳してくれているサイトです。
テキストから UML を生成する PlantUML についての解説記事を書いてみました。 PlantUML の使い方 (今回) シーケンス図 クラス図 オブジェクト図 パッケージ図 ユースケース図 アクティビティ図 状態遷移(ステートマシン)図 コンポーネント図 配置図 skinparam PlantUML 実行用のバッチファイル 今回は PlantUML の使い方の説明です。 PlantUML とは インストール 日本語 コマンドライン Doxygen との連携 Doxygen 連携用スクリプト その他のツールとの連携 オンラインデモ PlantUML とは 最近、プログラムの設計書などで UML を使うのが浸透してきていますが、 この UML を書くのはわりと面倒です。 CASE ツール, Doxygen などでは、クラス図を自動生成してくれますが、 ユースケース図やシーケンス図は自分
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
つい先日、とあるシステムの処理の流れと一部処理のフローチャートを付けた見積り資料を書くことになり、ちょうど良い機会だったので、MarkdownでUML図表が描ける「StackEdit」を使って、オールMarkdownで資料を作成してみた。 いやぁ、打ち込んだテキストがリアルタイムに図表化されていく様は、とても新鮮で、そしてすごく面白かった。資料が出来上がった後の達成感というか、完成した図表を見た時の感動が結構はんぱない。技術系の資料作成でこんな良い体験ができたのは初めてかもしれんな…(笑) ──と、結構感動的な体験ができるMarkdownでのUML図表作成なんだが、せっかくなのでそれの書き方を含めてもう少し突っ込んだTIPSとしてまとめておこうかと思った次第。 Markdown+UML とは？ とりあえず、「Markdown+UML」というのは私の造語だ。まぁ、正確に言うなら「UML di
🚀 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 new to PlantUML, we recom
概要 先日こちらの記事でgraphvizを使って状態遷移図を作成する方法をご紹介したのですが、これでもまだ複雑で記述量も多いのでとっつきづらいと思い、このgraphvizのソースコードを自動生成して画像を出力するコマンドラインアプリケーションを作成しました。 このアプリケーションはPyagram（ぱいあぐらむ）といい、その名前から察しがつくかと思いますがPythonを使用して開発されました。開発期間は１日でした。 このPyagramを使うことで複雑な状態遷移図を比較的簡単に作成することができるようになりますので、以下でご紹介したいと思います。 状態遷移図の描き方についてはこちらの記事を参考にしています。 出来上がりの図は以下のような感じになります。 図には幾つかのオブジェクトがあります。 図のタイトル（最上段） ビュー（二重丸） サーバサイドの処理（灰色の背景の一重丸） 画面遷移（破線の矢
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
