システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024
システム構成図、ER図、フローチャートなどを描くときに無料で使える作図ツールやドローイングツールまとめ。2024 システムを開発する際には、インフラを構築するためのシステム構成図やアプリケーションの仕様を検討するためのさまざまなUML関連のダイアグラム、フローチャートやデータベース設計におけるER図など、さまざまな作図をする場面があります。 これらの作図作業を支援してくれるツールは多数存在しますが、ここでは無料で使えるツール、あるいは無料プランが利用できる有料サービスなどをまとめました。 draw.io 無料で利用できるドローイングツールの代表的な存在がdraw.ioでしょう。ユーザー登録すら不要ですぐに使い始めることができて、作図したデータはGoogle DriveやOneDrive、Dropbox、GitHubやGitLab、ローカルデイバイスなどに保存できます。 GitHubにサーバ
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
目的を規定せずにモデリングを考えても意味がない - きしだのHatena
オブジェクト指向の本では「自転車をモデリングしてみましょう」「鳥をモデリングしてみましょう」ということが、どういうシステムで使うか規定せずによく書かれています。 けれども、モデリングではどういうシステムで使うかということが大事で、それを決めずにモデリングを考えても意味がありません。モデリングすべきはモノではなくシステムのプロセスです。 よく、オブジェクト指向では現実をモデリングするのようなことが言われますね。 例えば鳥が鳴くとして、その一種であるニワトリをどうモデリングするか、ということを考えるとします。 そうすると、まず void 鳴く() { print("コケコッコー"); } のようなメソッドを考えるのですけど、コケコッコーとうまく鳴けるのは鳴き慣れたニワトリです。そのため、鳴くメソッドにカウンターを用意してどんどんうまくコケコッコーになるようにしたくなります。 いや、そもそも、コ
データウェアハウスのデータモデリングを整理してみた - Qiita
概要 スタースキーマからスノーフレーク、ギャラクシー、そしてデータボールトやアンカーモデリングまで、各スキーマの特徴、利点、そして適用シナリオを掘り下げます。 スタースキーマ スタースキーマを元に整理します。 スタースキーマ または 星型スキーマ はデータウェアハウスに利用される最も単純なスキーマである。スタースキーマには唯1つもしくは少数のファクト表と複数のディメンション表が含まれる。スタースキーマはスノーフレークスキーマの一種であるが、多くの用途で利用されている。 DWHに利用される最も単純なスキーマ 唯一または少数のファクトテーブルと、複数のディメンションテーブルが含まれる スノーフレークスキーマの一種 モデル ファクト表はデータウェアハウスでの解析で利用され、複数の異なるディメンションに区分される。ファクト表は主要なデータを持つ一方、ディメンション表は相対的にサイズが小さくディメン
Nomnoml
Association types association - association -> association <-> dependency --> dependency <--> generalization -:> implementation --:> composition +- composition +-> aggregation o- aggregation o-> ball and socket -o) ball and socket o<-) ball and socket ->o note -- hidden -/- Class diagram types [class] [<abstract> abstract] [<instance> instance] [<reference> reference] [<package> package|components
Sequence diagrams, the only good thing UML brought to software development | Hacker News
I also find sequence diagrams to be the most useful, but disagree that the rest of UML is useless. Class, component, package, activity and state machine diagrams are all useful ways to model the structure and behavior of a system visually.The only reason the other diagram types fell out of favor is because of the development methodology change starting in the early 2000s. The industry started reje
『ちょうぜつソフトウェア設計入門――PHPで理解するオブジェクト指向の活用』は、現代ソフトウェア開発の”知の高速道路” - Magnolia Tech
ちょうぜつソフトウェア設計入門――PHPで理解するオブジェクト指向の活用 作者:田中 ひさてる技術評論社Amazon 予約してまで買ったものの、なかなか時間が取れず、読めていなかった『ちょうぜつソフトウェア設計入門――PHPで理解するオブジェクト指向の活用』をようやく読み終わりました。 筆者である田中ひさてるさん自身で描かれた表紙の可愛らしさからは想像もできないハードな内容なので、一気に読もうとすると「分かった気」になるだけで全然理解していなかった、ということになりがちなので、3回くらいぐるぐる読むといいと思います（そうです、この本は本文もイラストも丸っと同じ人が書いているのです！！）。 目次 第1章 クリーンアーキテクチャ 第2章 パッケージ原則 第3章 オブジェクト指向 第4章 UML（統一モデリング言語） 第5章 オブジェクト指向原則 SOLID 第6章 テスト駆動開発 第7章 依存
FigmaとNotionでUML・経理処理・デザインまでAll in oneな仕様書を書いて、更新・共有を楽にしてる話 - Qiita
前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事（厳密には違うんですが、本旨ではないので割愛します）→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い
DDD本を読むためには前提知識が非常に多いよ - Qiita
初めに きっかけ 新人研修中にDDDとか、PoEAAとかの話が少しだけ出ました。 ただ、イマイチわからないとの声が多数。 理由 なぜなら予備知識がたくさん必要だからです。(ほんとに多い) これはわからなくて当然。 そこで 独断と偏見で、予備知識となる用語を解説します。 偏見多いので、より正確な情報は、書籍やWebで調べてね。 この辺を説明します UML クラス図/シーケンス図 デザインパータン GoF/PoEAA 階層化アーキテクチャ DDD本のサマリ 知らなきゃいけない知識が多くて面倒だね。 説明しないけど、オブジェクト指向やデータベースとかの知識も必要だよ。 説明前にDDD本のページを見てみよう！！！ DDD本の最初のページ 「エリック・エヴァンスのドメイン駆動設計」より ??? よくわからないね さっきの図って何? 灰色の中心部分はソフトウェア設計のモデリングを表しています。 モデリ
Git ブランチの表現も Mermaid がよい感じに表示してくれました
Zenn や GitHub の Markdown から利用できる Mermaid には「Git ブランチを表現する」機能があります。 その機能を利用してみたところよい感じだったので、記述方法やカスタマイズについてなどを記事にしてみます。 Git ブランチを表現するとは？ ドキュメントでブランチの説明などを読んでいると下記のような図(グラフ)を見かけるかと思います。 図 1-1 AA によるブランチのグラフ A---B---C---D develop \ E---F---G topicA \ H---I---J topicB Mermaid の Gitgraph Diagrams を利用することにより、このような感じで表示できるようになります。 図 1-2 Mermaid によるブランチのグラフ 基本的な使い方 Mermaid 用コードブロックの先頭で gitGraph を記述し、Git の
モデリングはキラキラ技術より地味だが役に立つ / modeling-over-shiny-tech
# Event データモデリングとデータ基盤の構築・運用 （第14回ちゅらコラボ）CARTA HOLDINGS x ちゅらデータ 合同イベント https://churadata.connpass.com/event/254417/ ぼくのかんがえる最高のレポーティング基盤 https://speakerdeck.com/pei0804/hokufalsekankaeruzui-gao-falserehoteinkuji-pan-at-awsdeshi-jian-analytics-modernization ディメンションモデリングモデリング https://zenn.dev/pei0804/articles/dimensional-modeling スタースキーマ https://zenn.dev/pei0804/articles/star-schema-design コンフォ
ER図の自動生成について、dbdiagram.io, DBeaver, A5M2 を比較してみる。 - Qiita
はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
The C4 model for visualising software architecture
The C4 model is... 1. A set of hierarchical abstractions (software systems, containers, components, and code). 2. A set of hierarchical diagrams (system context, containers, components, and code). 3. Notation independent. 4. Tooling independent. Uses and benefits The C4 model is an easy to learn, developer friendly approach to software architecture diagramming. Good software architecture diagrams
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
Mermaid 入門してみたメモ(flowchart で力尽きた…)
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - AlexITC/collabuml: A collaborative UML editor; build with etherpad and plantuml
Text to diagram
GitHub - jgraph/drawio: draw.io is a JavaScript, client-side editor for general diagramming.
