はじめにTIG真野です。 秋のブログ週間2023 の3本目は、設計ドキュメントをGit管理して腐らせないようにがんばってみた話をします。 前段として6年前、「我々はいかにシステム開発におけるドキュメント腐る問題と戦えば良いのか」という記事を書いたのですが、その後の試行錯誤はどこにも残していないことに気づきました。普段のフューチャー技術ブログですとちょっと引け目を感じるテーマですが、秋の夜長を楽しむため読み物成分を多めに書くというテーマのこのブログリレーにピッタリな気がするため、この機会をお借りします。 ドキュメントも色々な種別があるかと思いますが、この記事では設計ドキュメントを指すことにします。設計ドキュメントは開発メンバーが参照するもので、ステークホルダーへの説明資料に引用して使うことはあれど、主目的は異なるという前提です。Design Docの場合もありますし、システム構成図、ERD、
GitHub - AlexITC/collabuml: A collaborative UML editor; build with etherpad and plantuml
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Text to diagram
Basic: An example of the most basic diagramming functions: create a box, give it a label, connect it to another box, label that connection. It also demonstrates shorthand ID substitution, if it exists in the syntax.
この記事では、UMLも書けるHonKit環境をDockerで構築したのでご紹介します。 HonKitはMarkDown記法で記述できるドキュメント作成ツールです。 事の始まりは、個人開発でDDDを実践しようと仕様・設計をきちんとしたかたちで整理したいと思ったことでした。 業務でGitBookを使っているのですがサポートが切れているとのことで、後継であるHonKitを使って環境を整備することにしました。 要件 UMLを記述できること 業務利用のGitBookでUMLを記述できて非常に快適だったため 実現方法 docker-composeでHonKit用のNode.jsコンテナとUML用のplantumlコンテナを用意して、Node.jsコンテナでHonkitを、plantumlコンテナでUMLをレンダリングするようにしました。 docker-compose.yml version: '3.3
PlantUMLのシーケンス図の書き方まとめ
PlantUMLの見た目を以前のデフォルト色に戻す - OITA: Oika's Information Technological Activities
PlantUML の今月リリースされたバージョン（V1.2022.2 あたり）から、デフォルトのテーマが変更になって、スタイリッシュな白黒の感じになりました。 以前のデフォルトテーマに戻す方法 あまり文句のある人もいないとは思いますが、あの以前の垢抜けない黄色の感じが好きだったとか、あるいは色弱だと見づらそうといった理由で、昔のスタイルに戻したいという人もいるかもしれない。 その場合は先頭に skin rose を書くだけで、以前の見た目に戻せるようです。 @startuml skin rose ... @enduml 不要になるskinparamあり 以前のデフォルトスタイルだと、影が濃いのが気になるということで skinparam shadowing false を指定して消していた人もいると思いますが、新しいスタイルは最初から影がついていないので、このパラメータは意味がなくなります。
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
Diagram as Code
Diagram as Code6 different ways to turn code into beautiful architecture diagrams
VSCode で PlantUML をプレビューする
VSCode で PlantUML をプレビューするには、 PlantUML 拡張 をインストールするのが定石です。 今回は次の手順で環境を構築しました。 PlantUML 拡張 を VSCode にインストールする Java 環境を用意する 1 はほかの拡張と同じ手順なのでここでは省略します。 2 は次のように準備しました。 Java 環境の構築 https://docs.microsoft.com/ja-jp/java/openjdk/download から microsoft-jdk-17.0.2.8.1-windows-x64.zip をダウンロード zip を解凍し、jdk-17.0.2+8\bin フォルダにパスを通す やらなくてよかったこと PlantUML を利用するとなると、plantuml.jar や Graphviz (dot.exe) を別途用意しないといけないのか
成長するドメインモデリングと相性抜群！PlantUMLの紹介 - BIGLOBE Style ｜ BIGLOBEの「はたらく人」と「トガッた技術」
ドメインモデルを図で理解するのに便利なPlantUML。レイアウト調整のノウハウと合わせてその魅力を紹介します。 はじめに 対象読者 PlantUMLとは メリット デメリット レイアウトを調整するためのテクニック まとめ はじめに 基盤本部（開発部門）の宮下です。 BIGLOBEではドメイン駆動設計（Domain Driven Design：DDD）を実践しています。 DDDではドメインモデルを育てていき、継続的にソフトウェアの価値を高めていくことが重要となります。 ドメインモデルとは、業務的な関心ごと(=ドメイン)の問題を解決するために表現するものです。そんなドメインモデルをみんなで設計するときに、BIGLOBEではPlantUMLというツールを使っています。キーボードだけでサクッと図を描けてしまう優れものです。 この記事では、PlantUMLに詳しくない方はもちろん、PlantUML
こんにちは中川です。 先日、 GitHub のMarkdownファイルで Mermaid がサポートされると案内されました。 https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ 私は、今までは図といえば、PlantUMLで書くことが多かったのですが、今後は世の中の流れ的には Mermaid が主流になるような気もしますので、ちょっと試してみました。 普段使っているVScodeで編集したいため、エクステンションを探してみたところ以下のものが見つかりました。 プレビューに関しては、PlantUML時代から元々使っていた「Markdown Preview Enhanced」が Mermaid にも対応していました。 Markdown Preview Enhanced Mermaid Markdown Sy
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
GitHub - hikerpig/pintora: An extensible text-to-diagrams library that works in both browser and node.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
長く維持されるシステム構成図のつくりかた 〜 PlantUML で継続的に AWS/GCP/Azure アーキテクチャ図をメンテする仕組み 〜 - Qiita
最新バージョンについては適宜 公式サイト をご確認ください。 AWS アイコン最新バージョン（2022/09/11 時点） 2022/09/11 時点の AWS Icons for PlantUML の最新バージョンは v13.1 です。 このバージョンにすると、アイコンが最近っぽい感じに変わります（語彙力 記事中のバージョンは古くなっているので、適宜以下のように読み替えてください。 インポートするアイコンによってはパス名が変わっていることがあるので、エラーが出たら適宜 アイコン一覧 を見て現在のパス名に修正してください。 （一文字だけ小文字が大文字になっているなど、微妙に変わっている場合があります） 最新バージョンについては適宜 公式サイト をご確認ください。 本記事は株式会社 Works Human Intelligence の アドベントカレンダー の 20 日目の記事となります。
こんにちは、kuraです。 この記事はDigital Identity技術勉強会 #iddance のアドベントカレンダーの12日目の記事です。 開発チームを離れてプロジェクトやサービスのマネジメントが中心の業務になっており、コーディングを全然しなくなったのですが、上流工程でシーケンス図はよく書くため、自身の作業効率を上げる意味も含めて今回はOAuth 2.0やOpenID Connectのシーケンス図をまとめようと思います。 画像だけでなくPlantUMLのコードも掲載しておくので、みなさんにも活用いただけたらと思います。 PlantUMLについて PlantUMLはクラス図やシーケンス図がかけるオープンソースの描画ツールです。Qiitaにも記事をまとめてくださっている方はたくさんいるので詳しい情報は検索してみてください。 筆者は以下のあたりを参考にVSCodeとの組み合わせで作成してい
PlantUML のテキストで書ける Git Flow と PlantUML で描いた Git Epic Flow - Qiita
Git Flow のブランチモデルは図で描かれることが多いです。Excel や Illustrator で描くと綺麗ですが修正や管理が大変です。 PlantUML はテキストで書けて修正や管理が簡単です。そして図の表示もできる PlantUML で Git Flow を書きました。 前半は git-flow のブランチモデルを PlantUML で作成する手順を 5 Step で紹介します。 後半は GitHub Flow や GitLab Flow そして git-flow を改善した Git Epic Flow を紹介します。 用語説明 Git は分散型バージョン管理システムです。 Git Flow は Git の機能のブランチの作成や更新をするルールのモデルです。 PlantUML はテキストで UML を記述できる DSL(ドメイン特化言語) です。 UML のシーケンス図は、オブ
秋のブログ週間連載の7本目です。 はじめにPlantUMLで使えるテーマについてのご紹介です。 以前、チームで機能設計するためのPlantUML標準化の記事でも書かせていただきましたが、PlantUMLのデフォルトカラーって少しドライですよね。 色の好みは人それぞれで、あれはあれでカッコよさはありますが、複雑な図は少しでも可愛く描きたい・楽しく見たいものです。 この記事ではPlantUMLのテーマについて、いくつかのオプションを紹介していきます。「PlantUMLの色を変えてみたい！」という方は是非ご活用いただければ嬉しいです。 前提 PlantUMLでは、skinparamを利用して図のビジュアル各要素を定義しますが、「テーマ」はskinparamの集合体です この記事ではテーマの作り方や、各運用方法等については触れません この記事で紹介するオリジナルテーマはシーケンス図のために作られた
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の一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
PlantUMLのクラス図の書き方まとめ
Railsプロジェクトのデータベースの構造のER図をPlantUMLで自動的に吐き出せるようにしてみた - Qiita
モチベーション QiitaでもPlantUMLを表示できるようになってきたのでいよいよPlantUMLが民主化されてきました。 そこで「データベースの情報を基に自動的にER図作ってくれたらいいのになぁ...」と思ったので勢いで作ってみました。 対象となる技術の選定と制限 ER図の特徴の都合上、各種リレーションの定義を取得するためにはORMが使用されているものを対象に作成する必要があります。 今回は以下が使用されている環境を想定してスクリプトを作成・実行しました MySQL Rails これは実行テストを行った対象である 「ハッカソンの開催情報を自動でお知らせするBot HackathonPortal 」 の実行環境に合わせたためです。 同じ Rails でも Postgresql や SQLite においては実行確認していないのでうまくいくかわかりません。(試してみてうまくいったご報告をい
私のチームで行っているドキュメント管理方法の紹介(GitHub Actions, S3, AsciiDoc) | DevelopersIO
ドキュメントツールのインストール(Windows) Macの場合の設定方法は、本項の後に記載 PowerShellの起動 各種ツールをインストールするため、PowerShellを管理者として実行 Windowsボタンを押下 powershell と入力 右クリックで管理者として実行 を選択します Chocolateyのインストール 本手順は前述で起動したPowerShellを利用 1.Chocolatey のサイトにアクセスし、インストールコマンドをクリップボードへコピー 2.前項でコピーしたコマンドをPowerShellにペーストして実行します Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServiceP
Visual Studio CodeでPlantUMLを使うメモ (Windows編).md Visual Studio CodeでPlantUMLを使うメモ (Windows編).md PlantUMLとは？ テキストベースの独自の記述言語を使って、UML図を描くことができるツール。 http://plantuml.com/ja/ ユースケース図、クラス図、シーケンス図、アクティビティ図などを描くことが可能。 Graphvizのインストール PlantUMLはdotを使って図を作成するので、あらかじめGraphvizをインストールしておく必要がある。 以下URLから、stable版のインストーラをダウンロード＆インストールする。 https://www.graphviz.org/download/ Javaのインストール OpenJDKを使う場合はこちらからダウンロード。 http://
【PlantUML】見た目系Tips覚書
今お世話になっている会社は、納品の関係でドキュメントはExcelで作ることが多いのですが、、、 図はなるべくPlantUMLに置き換えていこうと思って少しずつ使用範囲を広げています。 （pngで出力してExcelに張り付ける使い方が主ですが、、、 ただ、見た目等の本質的じゃないところで、少々指摘を貰ったりして、 ちょっとした小細工を使い回したりしているので、Tipsを覚書きしていきます。 色変更 デフォルトだと以下の色使いなのですが、会社指定のスライドマスタとか、 他の人が作った資料に一緒に載せると、統一感が無いことがあります。 色の変更は以下のページに説明があるように、skinparamを指定すれば変更できます。 指定できる項目は多岐にわたるのですが、ひとまずざっくり色を変更したければ、 以下5つを変更すればOKです。 矢印色(ArrowColor) フォント色(DefaultFontC
PlantUML クラス図 早見表 - Qiita
ガントチャート
ガントチャート ガントチャートは、プロジェクト管理に使用される強力なツールです。ガントチャートは、プロジェクトのスケジュールを視覚的に表し、マネージャーやチームメンバーがプロジェクト全体の開始日と終了日を一目で確認できるようにします。 ガントチャートでは、各タスクはバーで表され、その長さと位置は、タスクの開始日、期間、終了日を反映する。この形式により、あるタスクが完了しないと別のタスクが開始できないような、タスク間の依存関係を理解しやすくなります。さらに、ガントダイアグラムは、マイルストーンを含むことができます。マイルストーンは、プ ロジェクトのタイムラインにおける重要なイベントやゴールであり、明確なシンボル としてマークされます。 ガントチャートを作成するというコンテクストにおいて、PlantUMLはいくつかの利点を提供します。PlantUML は、ダイアグラムの作成にテキストベースのア
All Skin Parameters — Ashley's PlantUML Doc 0.2.01 documentation
All Skin Parameters¶ All “skinparams” (skin parameters) available in PlantUML in alphabetical order.
みなさん、システムのドキュメント作成に疲弊してませんか？ 私はいままで画面遷移図やワークフロー図などのシステムドキュメントはVisioやExcelで作っていました。ただVisioやExcelの場合にはシステムがある程度の大きさになってくると矢印が変なとこにくっついたり、配置が崩れたり（涙）結局、図面を作成するだけで時間がかかってしまう・・・そんな経験ありますよね・・・ そんな時、「PlantUML」というツールを使ってみたところ非常に簡単に図面が作れてしまいました！これは本当にマジで最高です！近年の中で一番オススメできるツールです！そこで今回はPlantUMLをDocker上にサクッと構築する方法をご紹介したいと思います。Dockerの環境があればさくっと5分以内で構築できます！ また、VSCodeのPlantUMLの拡張機能を追加することでリアルタイムで図面をプレビューする方法やMark
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as Code - Qiita
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as CodeMarkdownGitLabasciidocVisualStudioCodekroki これは、 NTTコミュニケーションズ Advent Calendar 2020 25日目の記事です。 昨日は @tnoyama さんの「TEKTONとArgoを比較してみた」でした。お楽しみいただけましたか？ Krokiとは 本記事では、テキストからの図表生成ツール Krokiを紹介します。最新バージョンは0.9.0です。 公式docs: Kroki! GitHub: yuzutech/kroki: Creates diagrams from textual descriptions! 概要 Kroki!は、テキストから統一的なAPIで、 UML C4 データ可視化 その他図表 を、PNG,
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設計ドキュメント腐る問題、Git管理で運用してみた結果 | フューチャー技術ブログ
VSCode(Visual Studio Code)でクラス図を書く方法 - Qiita
ChatGPTにマインドマップを作ってもらったら理解速度が爆速になる件｜Abiru
「怠惰・短気・高慢」であれ、ChatGPTを使って業務効率化しよう(要件定義編)
PlantUML - Mermaid 比較（シーケンス図） - Qiita
【Qiitaでも使える】テキストから図が生成できるMermaidについてのザックリ解説 - Qiita
Dockerで作るUMLも書けるHonKit環境 - Qiita
シーケンス図をコードベースで管理する（PlantUML） - Qiita
PlantUMLでJSONとYAMLのデータ構造を可視化してみた | DevelopersIO
ダイアグラム作成ツール Mermaid を試してみました
Mermaid 入門してみたメモ(flowchart で力尽きた…)
【永久保存版】OAuth 2.0 / OpenID Connect シーケンスまとめ - Qiita
PlantUMLのテーマ（思わぬ展開） | フューチャー技術ブログ
PlantUMLによるシーケンス図の書き方【メッセージやノートなど】
Visual Studio CodeでPlantUMLを使うメモ (Windows編).md
PlantUML でクラス図を作成する
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
結局UMLとかシーケンス図とかAWSの図とかどれで描くと良いのよ？と思ったときの選択肢 - Qiita
PlantUMLのレイアウトのコツと指定方法についてのまとめ
PlantUMLサーバをDockerで1分でサクッと構築＋VSCodeでプレビューする | SyachikuLOG