PlantUML備忘録(画面遷移図) - Qiita
画面遷移図で役立った構文 業務で画面遷移図(状態遷移図)を描きながら開発しているシステムの理解、未解決のバグを理解するタスクに取り組んだ時に助けられた構文を備忘録として残しておこうと思います。 合成状態 タブ遷移などを描くときに便利な構文として合成状態が有ります。 @startuml left to right direction title Example State Transition Diagram1 [*] -down-> メニュー1 メニュー1 -down-> メニュー2 state メニュー2 { [*] -down-> 概要 概要 -down-> 詳細 : 詳細 詳細 -down-> 概要 : 概要 } @enduml
PlantUML で JSON データを簡単視覚化
最近，仕事で使うことがあってたまたま気がついたのだが， PlantUML って JSON や YAML のデータを視覚化できるんだね。 やり方は簡単。たとえば { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spous
【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜 - Qiita
draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメです。 ツイッター公式アカウント 公式ブログ ショートカット ショートカット集です。机の上に置いて覚えましょう。 Line / 線 まずは最も頻繁に使う Line(線)の使い方からご紹介します。 矢印をまっすぐに揃える ちまちまと矢印の線をドラッグして微調整し
UMLでRailsモデリング - Qiita
Railsエンジニアな皆さん、モデリングしてますか? ひとりでシステム構築しているなら不要かもしれませんが、チームで活動し、ある程度の規模のシステムを構築/改修する場合は、いきなり実装するのではなくモデリングをしましょう! モデリングの手段はたくさんありますが、統一記法であるUMLに従うといろいろ下記のようなメリットを享受できてよいかと思います。 視覚的な表現によって構造・振る舞いを直感的に把握できる 開発に関わるメンバ全員が共通の言語でコミュニケーションできる 本記事ではRailsシステムをUMLでモデリングする際の表現方法を紹介します。想定する読者は、上位者の指示の下Railsシステムの構築/改修をすることができ、今後ステップアップとして実装設計とか構造設計と呼ばれるフェーズを独力で実施できることを望むような人(およびその上位者)です。これによって少しでも多くの人が実装設計できるように
PlantUML Example for モデルベース要件定義テクニック - Qiita
PlantUMLはテキストの記述でUMLの図を描くことができます。オプション機能や組み合わせで色々な表現をすることができるので、UML を拡張した図が使われるモデルベース要件定義テクニックの書籍からいくつかのモデルを記述します。 書籍にはモデルの着眼点や解説が丁寧に記載されています。図の背景に興味がある方は合わせてお読みください。 コンテキストモデル ユースケース図でシステムの関係者を整理します。 left to right direction を利用すると図の方向を左から右に変更できます。 left to right direction actor 経営者 rectangle システムに直接関わる人 { actor 顧客 actor 営業 actor 物流 actor システム部門 actor オーダー部門 経営者 -- 営業 経営者 -- 物流 顧客 -- (商品販売サイト) 営業 -
PlantUMLを通じてドメインモデル図の書き方を学ぶ - EurekaMoments
ダイアグラム別UML徹底活用 第2版 作者:井上樹翔泳社Amazon 目次 目次 はじめに プロジェクトの開始時にやるべきこと ドメインモデル図とは ドメインモデル図を描く手順 1. 「名詞」の抽出 2. モデル同士の関係を線と矢印で表す 3. 中心となるモデルに色を付ける ドメインモデル図を用いる際の注意点 ドメインモデル図の活用方法 ドメインモデル図の作成例 例1. 認証システムの場合 例2. 課金システムの場合 例3. 本屋の場合 例4. 投稿システムの場合 GitHub 参考資料 はじめに ソフトウェアの仕様書、設計書の作成や管理を効率化するために、Markdown + PlantUMLによる作成方法を日々模索しています。 しかしながら、そもそもUML図の正式な書き方というものをちゃんと分かっていないというのが正直なところなので、PlantUMLを通じてUMLの各種図の書き方を勉強
AsciiDocを全力で勧める 4つの理
AsciiDoc は Markdown と同じ軽量マークアップ言語の一種です。仕様書などの文書を書く上ではMarkdownより利点・メリットがあると感じていて、もともと Markdown で仕様書などを書いていましたが、今は AsciiDoc へ移行しました。 今では、 メモ、README など簡単なテキスト、ブログ記事書き => Markdown 仕様書などある程度分量のある文書 => AsciiDoc というすみ分けをしています。 Markdown と AsciiDoc を使ってみてわかった、AsciiDoc の良いところを 4つ記載します。 仕様が明確 AsciiDoc は仕様が明確です。どういう表現があるのか、どういう書き方をすれば良いか、公式のユーザガイドを見れば全て記載があります。 Markdown は方言が多いため、一言で Markdown 対応のツールと言っても対応している
PlantUMLでER図を書いて、githubで管理してみた - Qiita
きっかけ 趣味のWebサイト制作で頭の整理のためにシーケンス図等を書きたいなーと思ったので、 PlantUMLを使って書いた後にどうせならドキュメントでPlantUMLにできるところを PlantUMLにしてしまおうと思い立ったのがきっかけです。 PlantUMLとは PlantUMLはシーケンス図やクラス図等のダイアグラムを text形式で記述できる方式です。 メリット text形式だからgit等で差分を取りやすい vscode等のIDEの自動補完機能を使用すればかなりの速度でUML図を書けるようになる 後述のchrome拡張機能もあり、全てをtextで管理したいがちなエンジニアにとっては 良いツールとなっているのではと思います。 スニペットもうまく使っていければ高速で記述できそうです。 デメリット 学習コストが高い(ように感じた) 実際に生成される図を見ながらでないと整った図が書けない
PlantUMLでAWSサービスを含む図を作る
プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。 せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツ […] プレゼンテーション資料をMarkdown形式で書いていて、図を入れたいが図はどうやって用意しようか、となりました。 せっかくテキストエディタでプレゼンを作れるようにしているのに、図を描くのにテキストエディタでなくドローツールを開くのは面倒だな、テキストで図を描ければ、ソースコードとして管理できるから似たような図を量産するのも楽だし、バージョン管理で変更点もわかりやすい。 ということで探したところ、Plantuml が見つかりました。日本語のマニュアルもあるし、評判もいいみたい。 インストールしようとしたところ、図を1,2個作るだけならオンラインでできるようです。試
PlantUML Standard Library
PlantUML Standard Library Welcome to the guide on PlantUML's official Standard Library (stdlib). Here, we delve into this integral resource that is now included in all official releases of PlantUML, facilitating a richer diagram creation experience. The library borrows its file inclusion convention from the "C standard library", a well-established protocol in the programming world. Standard Librar
PlantUMLでデザインパターンのクラス図を描く - akrfjmtの日記
GoFのデザインパターンは23種類もあるので、PlantUMLでクラス図を書く練習にちょうどよい。 そういう訳で、PlantUMLでデザインパターンのクラス図を描く。 その前に、用語を整理しておこう。 UML では、用途に応じて図が何種類か定義されている。クラス図（Class Diagram）はそのうちの1つだ。 PlantUML はこれを書くためのツールで、jarとして端末から実行する。IntelliJ IDEA や Visual Studio Code といった IDE で使えるプラグインもあり、esa.io や Confluence のような情報共有ツール上でも利用できるので、好きな環境でやろう。 こういうテキストを書いておくと、 @startuml class ClassA { } class ClassB { } @enduml こういう図が出力される。 図を書く際は、ここから
我々はいかにシステム開発におけるドキュメント腐る問題と戦えば良いのか
フューチャーアーキテクト Advent Calendar 2017 の2日目です。 システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ … ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 今まで出会った一番辛いドキュメントは、PJ初期に作成したホワイトボードに書かれたラフスケッチの画像しか無かったところですね。まず字が汚いし、内容も最新版と微妙に異なっていました。新規参画者殺しにもほどがあると、ほんのちょっとだけ恨みました。 いやいや、ちゃんとサボらず整合性を取れよって？サボ
現場で役立つシステム設計の原則にあるUMLをPlantUMLで書いてみる - Qiita
フューチャーアーキテクト Advent Calendar 2017の2日目です。 はじめに システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 解決策としては、各種ドキュメントを、MarkdownやAsciiDoc、UMLはPlantUMLやmermaid、ERDはPlantUMLやerd、画面遷移図はUI Flow、REST-API設計はSwaggerなど、なるべくテキストベースで管理し、GitHubなどのリポジトリで管理する
PlantUML で ER 図（ERD）を描く（似非ではないです） - Qiita
------ :1 ----|| :1 and only 1 ----o| :0 or 1 -----{ :many ----|{ :1 or more ----o{ :0 or many 描画結果 このサンプルでは不要な水平線が入っています。この水平線はクラス図の「プロパティ（フィールド）」と「メソッド」を分ける「区切り線」ですが、hide empty members を最初に書いておくと非表示に出来ます。 参考：http://plantuml.com/class-diagram#Hide ER 図とは ER図そのものについては下記のサイトが詳しいです。 ER図 （Entity Relationship Diagram） また、書き方については下記の書籍が詳しいです。オススメです。 楽々ERDレッスン サンプル 前回 同様、下記のページからテーブル構成を参考にして、PlantUML で
PlantUMLでSysMLの要求図を描いてみる - Qiita
SysMLとは 巷ではIoTが叫ばれていますが、複数のシステムが複雑に連携するサービスが増えるにつれ、ソフトウェアだけではなく、システムをモデリングできる言語が必要とされ、開発されました。 要求図とは 世の中には、要求を階層的に記述する手法として、USDM(Universal Specification Describing Manner)1などが開発されているが、SysMLの要求図もその一種で、ダイアグラムを使って記述する方法です。 今回の趣旨 SysMLを記述するツールとしては、EnterpriseArchitectやastah*SysMLなどが代表的ですが、個人で購入するには敷居が高いのが正直なところ。eclipse上でモデリングできるソフトもいくつかありますが、どうも学習用には取っつきにくい印象があります。そこで、テキストに記述した内容からUMLのダイアグラムを気軽に生成できるPl
Export Astah diagrams to plantUML and mermaid!
There are several ways to generate UML diagrams via texts such as PlantUML and mermaid. One of Astah users, Evan Chen wrote a script to convert Astah diagrams for PlantUML and mermaid.js. Currently there are scripts for converting Sequence diagrams and Flowcharts. Script Overview：Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml- Scripts： To PlantUML：Sequence Diagrams To mermaid：Sequence Diagrams
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Real World PlantUML
Docker
GitHub - Hywan/Database-to-PlantUML: Compile PostgreSQL and MySQL table information into a PlantUML description.
女子中学生チケット詐欺事件
