はじめに データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。 Draw.io PlantUML Mermaid 以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。 （そのアプリのER図を今回サンプル図としています） 最近、 PlantUML を利用するようになり、ER図や、シーケンス図、クラス図の作図に利用しているのですが、とても編集しやすいと感じています。 ただ、どのツールにも、一長一短あるかと思いますので、それぞれ以下目次の内容を書いて、ご紹介したいと思います。 目次 1. Draw.io 1-1. VSCodeでの使い方 1-2. ER図 1-3. 感想 2. PlantUML 2-1. VSCodeでの使い方 2-2. ER図 2-3. 感想 3. Mermaid 3-1. VSCodeでの使い方
概要 PlantUMLでER図を書くことがあったのですが、 その時線がごちゃごちゃになって苦しんだのでTipsを残します。 PlantUMLを使ったことがないけどER図を書く必要がある エンティティの箱がどんどん右側に増えていって困る リレーションの線の長さを変えたい このような悩みを持つ初心者の方向けの内容です。 事前準備 今回使うテーブルについて 今回使うテーブルは下記のような感じです。 (RailsアプリケーションのテーブルのER図を書いていたので、 テーブルの命名などはActiveRecordのやり方に沿っています。) エンティティの中身については触れません。 エンティティをまとめたPlantUML @startuml tables entity companies as "companies\n会社" { + id [PK] -- name [会社名] created_at [作
PlantUMLで図を描いていて、こんな感じの図になってしまいテンションが下がってしまうことがあるのではないでしょうか。 このような残念な図にならないためのコツを書いてみようと思います。 クラス図を例に説明しますが、ユースケース図も基本的に同じです。 -- と - を使い分ける 図で表現したい領域において、関連性の高いものは - で結び、高くないもの（以降「普通の関連」と表記します）は -- で結ぶ。 同じアルファベットで始まる要素が関連性の高い要素で、A1, B1, C1を普通の関連 -- で結んだ例:
処理プロセスを整理したいときに、アクティビティ図を書くことがあります。「処理フロー」と「並行に実行できる処理」を可視化することができます。ここでは、PlantUMLを利用してアクティビティ図を書く方法について紹介します。 アクティビティ図を書く目的 私は、以下目的でアクティビティ図を書きます。 必要な前処理の確認 並行して作業を進められるアクティビティの発見 日常のルーチン作業を可視化して、改善を検討するのにも活用できます。 基本的な書き方｜「旧記法」と「新記法」 アクティビティ図は、開始点から始まり、 アクティビティを順番に記述して、終了点 で処理の終了です。 PlantUMLでアクティビティ図を書く方法として、旧記法と新記法があります。 旧記法
システムを理解する方法の1つに「状態遷移図の作成」があります。ここでは、「PlantUMLを利用した状態遷移図の書き方」と「状態遷移表からテストケースを抽出する方法」について解説します。「電話の状態」を例にして説明します。 状態とイベント 状態遷移とは？ 状態遷移は 状態 と イベント によって作られます。 状態 処理の状態 部位の状態 全体の状態 イベント 状態遷移のきっかけとなるアクションや条件 例 電話で考えると以下のようになります。 全体の状態とイベント 状態 電源オフ 電源オン イベント 電源オフ 電源オン 電話機能の状態とイベント 状態 待機中 着信中 発信中 通話中 イベント 着信 応答 発信 接続 切断 PlantUMLで状態遷移図を作成 文章による仕様だけだと理解しずらい場合、状態遷移図を書くことをお勧めします。 状態遷移図があると、仕様を直感的に理解しやすくすることがで
PlantUMLとは次に、PlantUMLについて簡単に説明します。PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
技術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の配置図は、システムの物理的・ソフトウェア的側面からシステムの構成を図示化したダイアグラムになります。コンポーネント図に似ていますが、コンポーネント図がソフトウェア的側面から図示化されるのに対して、配置図ではどのシステムで成果物が作成され、利用されるのかも表現されます。 配置図によって、よりコンポーネント間の連携や関連性が分かりやすくなります。 WEB上で簡単に配置図の作成・管理を行えるツール「NotePM」 配置図の目的 配置図はハードウェアや、その中で稼働するコンポーネントが可視化されます。それによってシステムの全体像が分かりやすくなります。また、成果物も図示化されるので、各コンポーネントで作成される成果物とその利用用途も明確になります。 現在、システムはハードウェアやコンポーネント含めて複雑に連携しています。あるシステムの修正が思わぬ場所で不具合を起こすことも少な
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
よく訓練されたアップル信者、都元です。大変ご無沙汰しておりますが、相変わらず生魚が好きです。 さて最近は、GitHub上でもろもろとソフトウェア開発をしていることが多いのですが、gitで管理するmdファイルはもちろん、issueやPR内でもMarkdown記法を使って様々な記述できるのはご存知の通りかと思います。 PlantUML さて、仕様のディスカッションやドキュメントの記述をしていると、ちょっとしたシーケンス図やクラス図、状態遷移図、UMLという図の記法を使ってコミュニケーションを取りたい場面が出てきます。 以前、当ブログでも「Atom と PlantUML で快適シーケンス図駆動開発ライフ」というエントリーにて、テキストの文法でUMLを記述して画像生成、それをGitHubに貼り付ける、というテクニックをご紹介しました。 PlantUMLは非常に強力な仕組みです。Atomによる編集も
シーケンス図をテキストで描いて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 を使う方法です。
モチベーション QiitaでもPlantUMLを表示できるようになってきたのでいよいよPlantUMLが民主化されてきました。 そこで「データベースの情報を基に自動的にER図作ってくれたらいいのになぁ...」と思ったので勢いで作ってみました。 対象となる技術の選定と制限 ER図の特徴の都合上、各種リレーションの定義を取得するためにはORMが使用されているものを対象に作成する必要があります。 今回は以下が使用されている環境を想定してスクリプトを作成・実行しました MySQL Rails これは実行テストを行った対象である 「ハッカソンの開催情報を自動でお知らせするBot HackathonPortal 」 の実行環境に合わせたためです。 同じ Rails でも Postgresql や SQLite においては実行確認していないのでうまくいくかわかりません。(試してみてうまくいったご報告をい
最近，仕事で使うことがあってたまたま気がついたのだが， 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とは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 クラス図とは システムの構造をクラスとクラス間の関連で表現する図です。 UMLの中でも代表的な図で、抽象的な概念図から、分析用の図、直接コードに落とし込めるような詳細設計図まで、様々な場面で活用することができます。 例 「インターネット記事投稿サービス」でどういったクラスや関連が必要になりそうかを分析するための図をイメージして作成してみました。 @startuml class ユーザー class 記事 class コメント class マガジン class タグ class ジャ
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? draw.io はブラウザを使用してフローチャート、プロセス図、組織図、UML 図、ER モデル、ネットワーク図などを作成できる優れたツールです。作成した図は xml ファイルとして保存でき、GitHub との連携もシームレスに行われます。3 年ほど愛用しているツールですが、隠された使い方がたくさんあります。すぐに忘れてしまうので取りまとめておきます。 「こんな使い方あるよ！オススメだよ！！」という方はぜひ編集リクエストをいただければ追記していく予定です 😊 ※ 主に参照している文献は以下、公式ブログは非常に分かりやすいのでオススメで
はじめに オークファングループ Advent Calendar 2019 16日目 はじめます！ 弊社はインフラ環境として AWS を使用しています。 構成図のツールでは PlantUML を採用しており、 インフラチーム全体が構成図をコードで管理出来るようにしております。 今回は AWS の構成図を PlantUML で描く際に使用している『AWS Icons for PlantUML』について ご紹介したいと思います。 なお PlantUML そのものについては色々記事が出ていると思いますので割愛させていただきます。 『AWS Icons for PlantUML』って？ PlantUML で AWS の構成図を作成するツールといえば標準ライブラリとして提供されている AWS-PlantUML が有名かと思います。 PlantUML Standard Library milo-mind
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く