PlantUML備忘録(画面遷移図) - Qiita
画面遷移図で役立った構文 業務で画面遷移図(状態遷移図)を描きながら開発しているシステムの理解、未解決のバグを理解するタスクに取り組んだ時に助けられた構文を備忘録として残しておこうと思います。 合成状態 タブ遷移などを描くときに便利な構文として合成状態が有ります。 @startuml left to right direction title Example State Transition Diagram1 [*] -down-> メニュー1 メニュー1 -down-> メニュー2 state メニュー2 { [*] -down-> 概要 概要 -down-> 詳細 : 詳細 詳細 -down-> 概要 : 概要 } @enduml
簡単にできるDDDのモデリング - ドメイン駆動設計 - little hands' lab
DDDではよく「モデリングが重要だ！」と言われますが、どのようにモデリングすればいいのかがわからず、一歩を踏み出せないことは多いのではないでしょうか。 そんな方のために、本記事ではDDDにおいてシンプルで成果が出しやすいモデリング手法について紹介します。 (本記事は、YouTube動画「10分でわかるドメインモデリング」の内容をもとにした解説記事です。) DDDの目的 DDDの目的から確認しましょう。 DDDの目的は2つ。 ①機能性を高めること これは、役に立つものを作ること、言い換えると「作ったけど使えない」を避けることです。 そのために、ドメインモデリングを行い、ソフトウェアを適用して役立てようとしている現実世界の領域(これの領域をDDDでは「ドメイン」と呼びます)について理解を深め、解決策を検討することを目指します。 ②保守性を高めること これは、長期間開発しても機能拡張が容易であり
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
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
AWS-PlantUMLで使える全AWSリソースの定義と画像表示 - Qiita
お題 PlantUMLという、ダイアグラムを独自のDSLで生成するツールがある。 （名前にUMLは付くもののUML以外にも、ワイヤーフレーム、ガントチャート、マインドマップ、ER図などさまざまなダイアグラムを生成できる。） そのPlantUMLの公式ライブラリとして、AWS-PlantUMLというものがあり、これを使うとテキスト形式のファイルでAWSリソースを使ったアーキテクチャ図を表現できる。 具体的には以下の通り。 1) 以下のようなPlantUML独自のDSLでテキストファイルを作る。 @startuml !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist !includeurl AWSPUML/common.puml !includ
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
我々はいかにシステム開発におけるドキュメント腐る問題と戦えば良いのか
フューチャーアーキテクト 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などのリポジトリで管理する
Visual Studio Code で UML を描こう！ - Qiita
この記事では、Windows 環境に Visual Studio Code と PlantUML をセットアップする手順を説明します。 PlantUML とは PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。 シーケンス図 / Sequence diagram ユースケース図 / Usecase diagram クラス図 / Class diagram アクティビティ図 / Activity diagram コンポーネント図 / Component diagram 状態遷移図 / State diagram オブジェクト図 / Object diagram 環境 下記の環境で動作確認しました。 Windows 10 Pro (64bit) Visual Studio Code 1.11 Java SE Runtime Environment
[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー） - Qiita
[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー）umlPlantUMLVisualStudioCode 最近、Atom から Visual Studio Code (以下 VS Codeと表記）に乗り換えたので、PlantUML環境の作成手順をメモしときます。 環境作成 1. エディタ本体の設定 1.1. VS Code をインストールする 公式ページか VS Code をインストールします。 Visual Studio Code - Code Editing. Redefined 2. PlantUML環境の準備 ※PlantUMLのバイナリは自前で準備する必要はありません（プラグインに同梱されているため） => 最新で任意の plantuml.jar を指定する機能が追加されました。 2.1.
![[Visual Studio Code][Windows] PlantUMLの環境を設定する（シンタックスハイライト+リアルタイムプレビュー） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/507113738ed845bd09ed685507bba75139041308/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVmlzdWFsJTIwU3R1ZGlvJTIwQ29kZSU1RCU1QldpbmRvd3MlNUQlMjBQbGFudFVNTCVFMyU4MSVBRSVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MiU5MiVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSU5OSVFMyU4MiU4QiVFRiVCQyU4OCVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVCOSVFMyU4MyU4RiVFMyU4MiVBNCVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU4OCUyQiVFMyU4MyVBQSVFMyU4MiVBMiVFMyU4MyVBQiVFMyU4MiVCRiVFMyU4MiVBNCVFMyU4MyVBMCVFMyU4MyU5NyVFMyU4MyVBQyVFMyU4MyU5MyVFMyU4MyVBNSVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTAwYjU4OGM5OWEzYmVlN2E1ZWJhNDM5Mjg3NGZmMGU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb2FyYS1sb2NhbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZTk3NjkxMjcwNTQxZDY0ZTg5MGQzMWYxNzdhMmRjMmI%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Oq44OD44Kv44K944OV44OI5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9295873effeb7ee0ebe6f415630ba074)
オブジェクト指向を学んで図解力、仕事力アップ
2017年8月30日に開催されたDDDAlliance( https://ddd-alliance.connpass.com/event/64219/ ) のLTの資料です。
チュートリアル | ステートマシン図・状態遷移表 | astah*
ソフトウェア開発は、次の3つの側面からシステムを捉えて設計を進めます。 機 能：どのようなサービスや処理を提供するか 構 造：どのような要素をどのように関係づけて構成するか 振舞い：どのような処理を実行するのか 本チュートリアルでは、このうち「振舞い」の設計に使うステートマシン図の描き方と、図を描いた後に、状態遷移表を使って仕様漏れなどを確認する方法を、CDプレーヤー操作システムを題材に用いて紹介します。 このチュートリアルで学べること UMLステートマシン図を使って、状態に基づく振舞いのモデルを作成する方法、さらに状態遷移表を使った効率的な、仕様の抜け漏れ確認の方法学びます。 作成するモデル図：ステートマシン図, 状態遷移表 ステートマシン図の描き方 図を描いた後に、状態遷移表を使って仕様漏れなどを確認する方法 対象者 モデリングやUMLステートマシン図、状態の遷移についてこれ
サクッとPlantUMLで状態遷移図を書いてみた - Qiita
ちょっとしたドキュメント作りたいなと探していたら、テキストで書けて比較的きれいな図が作成できるPlantUMLなるものを見つけたのでためしに使ってみました。 @startuml{状態遷移図player.png} state PlayerTurn{ [*] --> 入力待ち : 自摸 入力待ち --> [*] : 打牌 入力待ち -> カン確認入力待ち : カン [手牌=カン可能] 入力待ち -> 和了確認表示 : [手牌=和了] 入力待ち --> 立直打牌入力待ち : [手牌=聴牌] 入力待ち : entry / 手牌の状態を確認 入力待ち : do / 手牌の状態で処理を分岐 入力待ち : do / 打牌選択 立直打牌入力待ち --> [*] : 打牌選択 [打牌後の手牌=聴牌] 立直打牌入力待ち --> 立直不可表示 : 打牌選択 [打牌後の手牌<>聴牌] 立直打牌入力待ち --> 入
UMLを描こう – Vol.6 ロバストネス図からシーケンス図を描く
こんにちは、浦本です。 今回はロバストネス図からシーケンス図を描く方法について、順を追って解説します。 シーケンス図の立ち位置 シーケンス図は、詳細設計の成果物の中で最も重要な図です。描く際はいきなりゼロから描くのではなく、ロバストネス図を参考にしながら描きます。下図に、開発プロセス全体におけるシーケンス図の立ち位置を示します。 ICONIX Processでは、設計プロセスを予備設計と詳細設計の2段階に分けて行います（これを2パス設計と呼びます）。まずは予備設計で、実際のクラスを気にせずに「システム全体としてどのような処理・対話をすべきか」を先に決めます。次に詳細設計で、具体的にどういったクラスにそれらの処理を割り振るかを決めていきます。事前にロバストネス図さえ描いていれば、要件定義にきちんと結びついたシーケンス図を描くことができます。詳細設計ではシーケンス図の他にも、必要に応じてクラス
実践ロバストネス分析 第1回 ロバストネス分析の基礎 | オブジェクトの広場
ロバストネス分析は、ユースケースのように文章で記述された要求から分析レベルのオブジェクトを見つけ、適切な単位にまとめることができるものです。また、ソフトウェアシステムが行わなければならないことも適切な単位にまとめることができます。本稿はロバストネス分析の使い方と効果について解説します。 はじめに ロバストネス分析という用語を聞いたことはありますか？ ロバストネス分析を使うことによって、ユースケースのように文章で記述された要求から分析レベル（アーキテクチャが考慮されていないレベル）のオブジェクトを見つけ、適切な単位にまとめることができます。また、ソフトウェアシステムが行わなければならないことも適切な単位にまとめることができます。 これから、3 回に渡ってロバストネス分析について解説します。本稿にあたる第 1 回ではロバストネス分析の使い方と効果について解説し、第 2 回ではサンプルアプリケー
実践ロバストネス分析 第2回 ロバストネス分析の適用 | オブジェクトの広場
本稿は、2003年11月号に掲載した「ロバストネス分析実践 第一回」の続編になります。前回の記事を掲載した後に、読者の方々から様々なご意見、ご感想を頂いていたにもかかわらず、今回の第二回掲載までに、1年3ヶ月もの空白期間を作ってしまいました。本稿の掲載を心待ちにしていた読者の方々にお詫びいたします。 はじめに 前回の記事の訂正 前回の記事ではロバストネス分析を適用したソフトウェア開発の流れ、ロバストネス分析の方法を説明しました。 しかし、前回の記事を掲載してから今回の記事までの 1年3ヶ月の期間で、よりよいロバストネス分析について考えた結果、前回の記事で紹介した内容についていくつか訂正を加えようと思います。いずれ、下記の訂正を前回の記事に反映する予定です。 ロバストネス分析の範囲からユーザーインターフェースの定義を除く 前回の記事では、ロバストネス分析の「バウンダリを識別する」作業でバウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Real World PlantUML
GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
女子中学生チケット詐欺事件
