PlantUML備忘録(画面遷移図) - Qiita
画面遷移図で役立った構文 業務で画面遷移図(状態遷移図)を描きながら開発しているシステムの理解、未解決のバグを理解するタスクに取り組んだ時に助けられた構文を備忘録として残しておこうと思います。 合成状態 タブ遷移などを描くときに便利な構文として合成状態が有ります。 @startuml left to right direction title Example State Transition Diagram1 [*] -down-> メニュー1 メニュー1 -down-> メニュー2 state メニュー2 { [*] -down-> 概要 概要 -down-> 詳細 : 詳細 詳細 -down-> 概要 : 概要 } @enduml
設計 | PlantUMLでアクティビティ図作成( 処理フローと並行処理を可視化 ) - わくわくBank
処理プロセスを整理したいときに、アクティビティ図を書くことがあります。「処理フロー」と「並行に実行できる処理」を可視化することができます。ここでは、PlantUMLを利用してアクティビティ図を書く方法について紹介します。 アクティビティ図を書く目的 私は、以下目的でアクティビティ図を書きます。 必要な前処理の確認 並行して作業を進められるアクティビティの発見 日常のルーチン作業を可視化して、改善を検討するのにも活用できます。 基本的な書き方｜「旧記法」と「新記法」 アクティビティ図は、開始点から始まり、 アクティビティを順番に記述して、終了点 で処理の終了です。 PlantUMLでアクティビティ図を書く方法として、旧記法と新記法があります。 旧記法
「状態遷移図の書き方」と「状態遷移表からのテスト抽出方法」｜設計 - わくわくBank
システムを理解する方法の1つに「状態遷移図の作成」があります。ここでは、「PlantUMLを利用した状態遷移図の書き方」と「状態遷移表からテストケースを抽出する方法」について解説します。「電話の状態」を例にして説明します。 状態とイベント 状態遷移とは？ 状態遷移は 状態 と イベント によって作られます。 状態 処理の状態 部位の状態 全体の状態 イベント 状態遷移のきっかけとなるアクションや条件 例 電話で考えると以下のようになります。 全体の状態とイベント 状態 電源オフ 電源オン イベント 電源オフ 電源オン 電話機能の状態とイベント 状態 待機中 着信中 発信中 通話中 イベント 着信 応答 発信 接続 切断 PlantUMLで状態遷移図を作成 文章による仕様だけだと理解しずらい場合、状態遷移図を書くことをお勧めします。 状態遷移図があると、仕様を直感的に理解しやすくすることがで
PlantUMLによるシーケンス図の書き方【メッセージやノートなど】
PlantUMLとは次に、PlantUMLについて簡単に説明します。PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
VScode+pandoc+Lualatexで日本語pdfをMarkdownから出力する - Qiita
事の経緯 ここ数年間Markdownで様々なメモや実験プロトコルをVScode+pandocで作製していたが、日本語markdownは専らWordファイルに変換していました。最近TeXliveを(なんとなく)導入したので「latex+pandocでmarkdown→pdfできたら便利じゃない？」と思いpdf化に勤しんでいたら何故か日本語の含まれている文書ではpdf化できないらしいので、その解決策を備忘録代わりにQiitaにあげておきます。他にハマっている人（いるか知らないけど）の助けになるかも？ 原因 @sky_y さんの書かれた『メモ:Pandoc+LaTeXで気軽に日本語PDFを出力する』に非常にわかりやすく原因(+解決策)が書かれています。是非ご参照ください。 簡単に言いますと 1. Pandocが使うPDF変換エンジンは、デフォルトでpdflatex 2. pdflatexは日本語
Mono Works
Home About > Mono Worksについて > Mono Worksのお仕事 > お知らせ > 採用案内 ブログ ブログ検索 Mono Works 株式会社Mono Works OfficialSite ようこそ、株式会社Mono Worksへ 新着記事 2023. May. 10 WSL環境の移行 2023. Apr. 10 はじめての自作キーボード：Keyball61 2022. Oct. 05 事務所を移転しました。 2022. Sep. 17 ラズパイでラジオ録音してNASへファイル転送 2022. Mar. 26 Surface Go 2 と Chrome OS お知らせ 2022. Oct. 05 事務所を移転しました。 2021. Apr. 01 事務所を移転しました。 2016. Aug. 22 Webサイトをリニューアルしました。 2014. Sep. 26
Pandoc で PlantUML を出力
pandoc は、当然ですがデフォルトでは plantuml に対応していません。 しかし、 markdown でドキュメントを書く際は、 plantuml をよく使用するので、 plantuml の画像を出力できるようにします。 前提 お約束の前提ですが、以下の環境とします。 Windows 10 Home 64bit また、あらかじめ以下もインストール済みとします。 graphviz （plantuml を扱うのに必要） python3 （pandoc のフィルターに使用） 結果的に python は使用しませんでした node.js (npm を使用するのに必要) plantuml とは plantuml がどんなもので、plantuml そのものをどうやってインストールするかは省略します。 詳しくは↓サイトに紹介されています。 qiita.com pandoc の plantuml
PlantUMLで少しだけ複雑な構成図を書いてみた【AWSとか】 | SyachikuLOG
```plantuml skinparam sequence { ArrowFontSize 20 } !define AWSPUML https://raw.githubusercontent.com/milo-minderbinder/AWS-PlantUML/release/18-2-22/dist !includeurl AWSPUML/common.puml !includeurl AWSPUML/Compute/AmazonVPC/AmazonVPC.puml !includeurl AWSPUML/Compute/AmazonVPC/Internetgateway/Internetgateway.puml !includeurl AWSPUML/Compute/AmazonVPC/VPCNATgateway/VPCNATgateway.puml !includeurl AWS
PlantUML Standard Library
@startuml !include <archimate/Archimate> title Archimate Sample - Internet Browser ' Elements Business_Object(businessObject, "A Business Object") Business_Process(someBusinessProcess,"Some Business Process") Business_Service(itSupportService, "IT Support for Business (Application Service)") Application_DataObject(dataObject, "Web Page Data \n 'on the fly'") Application_Function(webpageBehaviour,
長く維持されるシステム構成図のつくりかた 〜 PlantUML で継続的に AWS/GCP/Azure アーキテクチャ図をメンテする仕組み 〜 - Qiita
最新バージョンについては適宜 公式サイト をご確認ください。 AWS アイコン最新バージョン（2022/09/11 時点） 2022/09/11 時点の AWS Icons for PlantUML の最新バージョンは v13.1 です。 このバージョンにすると、アイコンが最近っぽい感じに変わります（語彙力 記事中のバージョンは古くなっているので、適宜以下のように読み替えてください。 インポートするアイコンによってはパス名が変わっていることがあるので、エラーが出たら適宜 アイコン一覧 を見て現在のパス名に修正してください。 （一文字だけ小文字が大文字になっているなど、微妙に変わっている場合があります） 最新バージョンについては適宜 公式サイト をご確認ください。 本記事は株式会社 Works Human Intelligence の アドベントカレンダー の 20 日目の記事となります。
AWS 構成図を PlantUML で描画できる『AWS-PlantUML』の紹介 - サーバーワークスエンジニアブログ
技術4課の多田です. AWS 環境の構成図を書く機会で PowerPoint や Cacoo 等のサービスを使うことがあると思います.作図もコードで制御する方法もないかと思い調べてみたら,「AWS-PlantUML」というツールがありました.今回はこのツールを使って作図する方法と所感を書いていきます. milo-minderbinder/AWS-PlantUML 「AWS-PlantUML」とは 「AWS-PlantUML」とは,PlantUML 形式で AWS 構成図を書くためのツールになります.PlantUML の実行環境は調べればたくさん出てきますが,僕は普段 Visual Studio Code(以下,vscode)を使うため vscode で使う環境をセットアップしました. 参考URL PlantUML qjebbs/vscode-plantuml 「AWS-PlantUML」を
配置図テンプレート（書き方とサンプル例）
配置図とは？ UMLの配置図は、システムの物理的・ソフトウェア的側面からシステムの構成を図示化したダイアグラムになります。コンポーネント図に似ていますが、コンポーネント図がソフトウェア的側面から図示化されるのに対して、配置図ではどのシステムで成果物が作成され、利用されるのかも表現されます。 配置図によって、よりコンポーネント間の連携や関連性が分かりやすくなります。 配置図の目的 配置図はハードウェアや、その中で稼働するコンポーネントが可視化されます。それによってシステムの全体像が分かりやすくなります。また、成果物も図示化されるので、各コンポーネントで作成される成果物とその利用用途も明確になります。 現在、システムはハードウェアやコンポーネント含めて複雑に連携しています。あるシステムの修正が思わぬ場所で不具合を起こすことも少なくありません。全体像と関連性が明確になることで、そうした不具合の発
PlantUMLのシーケンス図の書き方｜kitabatake
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
GitHub の Markdown (GFM) でPlantUMLを表示するChrome拡張 | DevelopersIO
よく訓練されたアップル信者、都元です。大変ご無沙汰しておりますが、相変わらず生魚が好きです。 さて最近は、GitHub上でもろもろとソフトウェア開発をしていることが多いのですが、gitで管理するmdファイルはもちろん、issueやPR内でもMarkdown記法を使って様々な記述できるのはご存知の通りかと思います。 PlantUML さて、仕様のディスカッションやドキュメントの記述をしていると、ちょっとしたシーケンス図やクラス図、状態遷移図、UMLという図の記法を使ってコミュニケーションを取りたい場面が出てきます。 以前、当ブログでも「Atom と PlantUML で快適シーケンス図駆動開発ライフ」というエントリーにて、テキストの文法でUMLを記述して画像生成、それをGitHubに貼り付ける、というテクニックをご紹介しました。 PlantUMLは非常に強力な仕組みです。Atomによる編集も
GitHubのREADME.mdにシーケンス図を埋め込む - Qiita
シーケンス図をテキストで描いてMarkdownに埋め込みたい README.md のような Markdown ファイルに、シーケンス図をテキストで描いて、埋め込みたいんです。 でも、たいていは「テキストでシーケンス図を描いて、それを画像にしてアップロードして、そのURLをMarkdownに記述する」という方法でした。 Markdownテキストでシーケンス図とフローチャートを描く - Qiita Markdownでシーケンス図を書いてGithubのREADME.mdに埋め込む - Qiita もっと簡単にできないものかと調べてみると、StackOverflow に git - How to integrate UML diagrams into GitLab or GitHub - Stack Overflow がありました。 PlantUML proxy service を使う方法です。
Railsプロジェクトのデータベースの構造のER図をPlantUMLで自動的に吐き出せるようにしてみた - Qiita
モチベーション QiitaでもPlantUMLを表示できるようになってきたのでいよいよPlantUMLが民主化されてきました。 そこで「データベースの情報を基に自動的にER図作ってくれたらいいのになぁ...」と思ったので勢いで作ってみました。 対象となる技術の選定と制限 ER図の特徴の都合上、各種リレーションの定義を取得するためにはORMが使用されているものを対象に作成する必要があります。 今回は以下が使用されている環境を想定してスクリプトを作成・実行しました MySQL Rails これは実行テストを行った対象である 「ハッカソンの開催情報を自動でお知らせするBot HackathonPortal 」 の実行環境に合わせたためです。 同じ Rails でも Postgresql や SQLite においては実行確認していないのでうまくいくかわかりません。(試してみてうまくいったご報告をい
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
PlantUMLのクラス図の書き方まとめ
この記事は、PlantUMLでクラス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 クラス図とは システムの構造をクラスとクラス間の関連で表現する図です。 UMLの中でも代表的な図で、抽象的な概念図から、分析用の図、直接コードに落とし込めるような詳細設計図まで、様々な場面で活用することができます。 例 「インターネット記事投稿サービス」でどういったクラスや関連が必要になりそうかを分析するための図をイメージして作成してみました。 @startuml class ユーザー class 記事 class コメント class マガジン class タグ class ジャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - awslabs/aws-icons-for-plantuml: PlantUML sprites, macros, and other includes for Amazon Web Services services and resources
M1 MacのVSCodeにPlantUMLを導入 - JPDEBUG.COM