はじめに データベース設計の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について簡単に説明します。PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
```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
@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,
インポートするアイコンによってはパス名が変わっていることがあるので、エラーが出たら適宜 アイコン一覧 を見て現在のパス名に修正してください。 （一文字だけ小文字が大文字になっているなど、微妙に変わっている場合があります） 最新バージョンについては適宜 公式サイト をご確認ください。 本記事は株式会社 Works Human Intelligence の アドベントカレンダー の 20 日目の記事となります。 昨日は @h53 さんの 情報処理安全確保支援士試験（SC）合格体験記 でした。 はじめに みなさん、構成図描いていますか？ システム開発をするうえで構成図は欠かせない存在です。 特に昨今はクラウドサービスの利用が当たり前となってきており、どのようなクラウドサービスを活用して設計を行うかを議論する上で、構成図の価値は高まっていると感じます。 最近おもしろいと思ったのは、AWS Dev
技術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 /'
最近，仕事で使うことがあってたまたま気がついたのだが， 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
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
