タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
秋のブログ週間連載の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
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
はじめに データベース設計の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での使い方
Text to Diagram Tools Comparison 2025 | D2 vs Mermaid vs PlantUML vs Graphviz
Text to Diagram Tools ComparisonCompare D2, Mermaid, PlantUML & Graphviz side-by-side
GitHub - ddddddO/gdag: Easily manage 🕸DAG🕷 with Go. DAG is an acronym for Directed Acyclic Graph. Output is in PlantUML or Mermaid format. Useful for progressing tasks.
package main import ( "fmt" "os" g "github.com/ddddddO/gdag" ) func main() { var dag *g.Node = g.DAG("ゴール(目的)") var design *g.Node = g.Task("設計") reviewDesign := g.Task("レビュー対応") developFeature1 := g.Task("feature1開発") developFeature1.Note("xxが担当") reviewDevelopFeature1 := g.Task("レビュー対応") developFeature2 := g.Task("feature2開発") developFeature2.Note("yyが担当") reviewDevelopFeature2 := g.Task("レビュー対応
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 UML のシーケンス図
【PlantUML】見た目系Tips覚書
今お世話になっている会社は、納品の関係でドキュメントはExcelで作ることが多いのですが、、、 図はなるべくPlantUMLに置き換えていこうと思って少しずつ使用範囲を広げています。 （pngで出力してExcelに張り付ける使い方が主ですが、、、 ただ、見た目等の本質的じゃないところで、少々指摘を貰ったりして、 ちょっとした小細工を使い回したりしているので、Tipsを覚書きしていきます。 色変更 デフォルトだと以下の色使いなのですが、会社指定のスライドマスタとか、 他の人が作った資料に一緒に載せると、統一感が無いことがあります。 色の変更は以下のページに説明があるように、skinparamを指定すれば変更できます。 指定できる項目は多岐にわたるのですが、ひとまずざっくり色を変更したければ、 以下5つを変更すればOKです。 矢印色(ArrowColor) フォント色(DefaultFontC
長く維持されるシステム構成図のつくりかた 〜 PlantUML で継続的に AWS/GCP/Azure アーキテクチャ図をメンテする仕組み 〜 - Qiita
インポートするアイコンによってはパス名が変わっていることがあるので、エラーが出たら適宜 アイコン一覧 を見て現在のパス名に修正してください。 （一文字だけ小文字が大文字になっているなど、微妙に変わっている場合があります） 最新バージョンについては適宜 公式サイト をご確認ください。 本記事は株式会社 Works Human Intelligence の アドベントカレンダー の 20 日目の記事となります。 昨日は @h53 さんの 情報処理安全確保支援士試験（SC）合格体験記 でした。 はじめに みなさん、構成図描いていますか？ システム開発をするうえで構成図は欠かせない存在です。 特に昨今はクラウドサービスの利用が当たり前となってきており、どのようなクラウドサービスを活用して設計を行うかを議論する上で、構成図の価値は高まっていると感じます。 最近おもしろいと思ったのは、AWS Dev
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
はじめに シーケンス図やクラス図などがコードで書けるうえ、AWSやAzureのアイコンを使って構成図までコードで書けてしまうPlantUMLにハマり、しばらく使ってみた結果、ある程度きれいな構成図が描けるようになったため、これまでのノウハウをまとめてみようと思います。 なお、今回はPlantUMLのインストール方法や使い方、初歩的な書式等まで説明していると長くなってしまうため、要点のみまとめます。 今回描いてみた構成図 仕事で描いた図を載せるわけにもいかないので、AWSが公開しているAWSソリューションの1つである「AWSでのワークロード検出(旧AWS Perspective)」の構成図をサンプルとしてPlantUMLでできるだけ基の構成図に近づけるように描いてみました。 もしAWS Perspective自体に興味があるようなら以前私が書いた記事も以下で紹介しておきますので参考にどうぞ。
成長するドメインモデリングと相性抜群！PlantUMLの紹介 - BIGLOBE Style ｜ BIGLOBEの「はたらく人」と「トガッた技術」
ドメインモデルを図で理解するのに便利なPlantUML。レイアウト調整のノウハウと合わせてその魅力を紹介します。 はじめに 対象読者 PlantUMLとは メリット デメリット レイアウトを調整するためのテクニック まとめ はじめに 基盤本部（開発部門）の宮下です。 BIGLOBEではドメイン駆動設計（Domain Driven Design：DDD）を実践しています。 DDDではドメインモデルを育てていき、継続的にソフトウェアの価値を高めていくことが重要となります。 ドメインモデルとは、業務的な関心ごと(=ドメイン)の問題を解決するために表現するものです。そんなドメインモデルをみんなで設計するときに、BIGLOBEではPlantUMLというツールを使っています。キーボードだけでサクッと図を描けてしまう優れものです。 この記事では、PlantUMLに詳しくない方はもちろん、PlantUML
PlantUML Web Server
Create simply and freely UML diagrams from your browser thanks to PlantUML Web Server. Just enter a text diagram, and get the result in PNG or SVG format.
概要 PlantUMLでER図を書くことがあったのですが、 その時線がごちゃごちゃになって苦しんだのでTipsを残します。 PlantUMLを使ったことがないけどER図を書く必要がある エンティティの箱がどんどん右側に増えていって困る リレーションの線の長さを変えたい このような悩みを持つ初心者の方向けの内容です。 事前準備 今回使うテーブルについて 今回使うテーブルは下記のような感じです。 (RailsアプリケーションのテーブルのER図を書いていたので、 テーブルの命名などはActiveRecordのやり方に沿っています。) エンティティの中身については触れません。 エンティティをまとめたPlantUML @startuml tables entity companies as "companies\n会社" { + id [PK] -- name [会社名] created_at [作
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とは次に、PlantUMLについて簡単に説明します。PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
はじめに GitHub が Mermaid に対応しました1。 シーケンス図の記法を比べてみます。私はもともと PlantUML を使用していたため「PlantUML 使いから見ると、Mermaid では...」という書き方になりがちなのはご容赦ください。 それぞれの公式 PlantUML - シーケンス図の構文と機能 オンラインエディタ Mermaid - Sequence diagram オンラインエディタ 手軽に導入 手軽に試したい場合、どちらも Visual Studio Code の拡張機能 Markdown Preview Enhanced を使えば対応します（以下「VS Code では」と書かれているのは「Visual Studio Code の Markdown Preview Enhanced を使えば」という意味だと思ってください）。したがって、両記法を併記できます。
はじめに データアナリティクス事業本部の藤川です。 簡単なデータ構造のJSONであれば、Pretty表記にするだけで、頭の中で理解することができます。しかしながら、巨大なJSONからデータ構造をイメージするのは非常に困難です。YAMLも同様です。 PlantUMLをご存じでしょうか。UMLのダイアグラムをテキストベースで記述できるコンポーネントですが、UMLのダイアグラムを描けるだけではありませんでした。 ここでは、Visual Studio Code（以下、VSCode）のPlantUML拡張機能で、JSONとYAMLのデータ構造を可視化する方法をご紹介します。また、SVGファイルにダウンロードできるので、複雑で巨大なJSONであっても、自由に拡縮表示できて、非常に便利です。 JSONまたはYAMLのデータがあれば2行追加するだけで可視化できます。是非お試しください。 準備 次の2点を準
はじめに PlantUML はテキストで作図できるため、作図のために別ツールを起動して、画像で出力して、という手順がなく Markdown 内でちょっとした図を作成する際に便利です。 PlantUML には AWS や Azure のアイコンライブラリがあり、クラウド環境の構成図も作成できます。AWSは PlantUML で作図した事例も多く、例えば以下のような解説記事があります。 一方でAzureはあまりQiitaで解説された事例があまり見つからなかったので、今回書いてみることにします。 完成図 Microsoft Learn にあるNATゲートウェイのチュートリアルの構成図を参考に以下の図を作成しました。 作成した図 参考にした図 画像引用元: https://learn.microsoft.com/ja-jp/azure/nat-gateway/quickstart-create-n
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) を別途用意しないといけないのか
C#のソースコードからPlantUMLのクラス図を生成するツール PlantUmlClassDiagramGenerator 1.3.0 をリリースしました！ - Qiita
PlantUmlClassDiagramGenerator 1.3.0 C#のソースコードからPlantUMLのクラス図を生成するツールのversion 1.3.0 をリリースしました！ 本バージョンから、生成元のソースコードに属性を付けることで、出力内容を柔軟に制御できるようになりました。 VSCode Extension Visual Studio Codeの拡張機能としても利用できます！ 属性を使ったカスタマイズ機能の追加 本ライブラリには元々プロパティやフィールドからクラス間の関連を自動生成する機能も付いているのですが、あまり細かい制御ができず使い勝手が良くありませんでした。 そこで、クラスやプロパティ、メソッドのパラメータなどに属性を付けることでクラス図への出力をある程度制御できるようにしました。 この機能を利用するには、各種属性が定義されているNuGetパッケージを対象のC#プ
クラスの箱を描く基本クラスの箱を描くには、class キーワードを使用します。 他にも、interface でインタフェース、abstract で抽象クラス、enum で列挙型を定義することができます。
PlantUMLでガントチャートを書く際の記法を機能別にまとめる。 内容的には下記参考ページの公式Documentに書かれていることを書き直し、タスクに関する事項とチャート全体に関わる事項で分けて並べ替えただけのものに近い。 各機能のうち、気になる点については、実際に確認して補足を加えてある。 参考ページ ガントチャート 発端 Excel上に入力したタスクについてのデータ(開始日、依存関係など)から、ガントチャートを作るプログラムを書いている。 各種ダイアグラムをまとめてくれているkroki.ioのexamplesでは、ガントチャートはmermaidのものを使っているので、最初はmermaidのものを使おうと思ったんだが、mermaidの公式サイトを見ても記法について十分な説明も無いし、依存するタスク間を結ぶ線も書かれないなど、イマイチだと感じた。 よく探すと、PlantUMLでもガントチ
PlantUMLのクラス図の書き方まとめ
この記事は、PlantUMLでクラス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 クラス図とは システムの構造をクラスとクラス間の関連で表現する図です。 UMLの中でも代表的な図で、抽象的な概念図から、分析用の図、直接コードに落とし込めるような詳細設計図まで、様々な場面で活用することができます。 例 「インターネット記事投稿サービス」でどういったクラスや関連が必要になりそうかを分析するための図をイメージして作成してみました。 @startuml class ユーザー class 記事 class コメント class マガジン class タグ class ジャ
PlantUMLのシーケンス図の書き方まとめ
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例 インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
VSCodeで超快適なMarkdownエディタ環境を作る【プレビュー/画像貼付/目次/PlantUML】 | SyachikuLOG
Selenimumのエラー：「AttributeError: ‘list’ object has no attribute ‘text’」
Railsプロジェクトのデータベースの構造のER図をPlantUMLで自動的に吐き出せるようにしてみた - Qiita
モチベーション QiitaでもPlantUMLを表示できるようになってきたのでいよいよPlantUMLが民主化されてきました。 そこで「データベースの情報を基に自動的にER図作ってくれたらいいのになぁ...」と思ったので勢いで作ってみました。 対象となる技術の選定と制限 ER図の特徴の都合上、各種リレーションの定義を取得するためにはORMが使用されているものを対象に作成する必要があります。 今回は以下が使用されている環境を想定してスクリプトを作成・実行しました MySQL Rails これは実行テストを行った対象である 「ハッカソンの開催情報を自動でお知らせするBot HackathonPortal 」 の実行環境に合わせたためです。 同じ Rails でも Postgresql や SQLite においては実行確認していないのでうまくいくかわかりません。(試してみてうまくいったご報告をい
PlantUML Editor
GitHub - smeghead/php-class-diagram: A CLI tool that parses the PHP source directory and generates PlantUML class diagram scripts as output.
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
2022年 GitHubがmermaidによる作図に対応した。 PlantUML派としては悔しいです。 しかしmermaid-jsのいいところはJavaScriptベースなのでブラウザの中で完結する。 それ故にWikiとの統合がしやすかったのだろう。 対してPlantUMLはJavaベースなのがつらい。 JREがないと動かない VSCodeで使うときもここはちょっと煩わしい Appletの廃れた今、ブラウザ上でJavaコードを動かすのは無い それ故にplantuml-serverを立てる必要がある サーバーにするとトラフィック量によるスケール費用とか、DoS攻撃とか色々気になるから採用しづらくなる気持ちがわかる おまけにGraphviz依存もある ↓ PlantUMLがWASMになればブラウザ上で完結して幸せになれるんじゃね？
OSSのモデリングツール「PlantUML」使ってみた～ 無償のソフトウェアテストツールを知ろう：part2 ～ | ハートランド・ザ・ワールド
先日の記事、 「現場に必要なOSS (オープンソースソフトウェア) のテストツールとは」 で触れた、無償のテストツールをいくつか紹介していくシリーズ。 今回は、ソフトウェア設計時に活用できるモデリングツール 『 PlantUML 』 を実際に使ってみました。 本格的なテストフェーズで使える無償の単体テストツール『 Google Test 』を使ってみた記事はコチラ ↓ から。 OSSの単体テストツール「Google Test」使ってみた。 組込み機器開発にも利用でき、環境構築も用意に可能です。ただ、運用まで考えると適用は慎重に…。 読んでみる 設計ドキュメントの必要性と実情 みなさんはソフトウェア設計時のドキュメントについて、どのような方法で作成や整備をされていますか？ ソフトウェアの改修が必要な場合に、設計ドキュメントを見返すことに苦労したことはありませんか？ 良く聞くところでは… 「設
PlantUMLの見た目を以前のデフォルト色に戻す - OITA: Oika's Information Technological Activities
PlantUML の今月リリースされたバージョン（V1.2022.2 あたり）から、デフォルトのテーマが変更になって、スタイリッシュな白黒の感じになりました。 以前のデフォルトテーマに戻す方法 あまり文句のある人もいないとは思いますが、あの以前の垢抜けない黄色の感じが好きだったとか、あるいは色弱だと見づらそうといった理由で、昔のスタイルに戻したいという人もいるかもしれない。 その場合は先頭に skin rose を書くだけで、以前の見た目に戻せるようです。 @startuml skin rose ... @enduml 不要になるskinparamあり 以前のデフォルトスタイルだと、影が濃いのが気になるということで skinparam shadowing false を指定して消していた人もいると思いますが、新しいスタイルは最初から影がついていないので、このパラメータは意味がなくなります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PlantUMLのテーマ（思わぬ展開） | フューチャー技術ブログ
PlantUMLでできるだけきれいなAWS構成図を描く方法 - Qiita
PlantUMLでER図を書くときのコツ - Qiita
Visual Studio CodeでPlantUMLを使うメモ (Windows編).md
PlantUMLによるシーケンス図の書き方【メッセージやノートなど】
PlantUML - Mermaid 比較（シーケンス図） - Qiita
PlantUMLでJSONとYAMLのデータ構造を可視化してみた | DevelopersIO
PlantUMLでそれなりにきれいなAzure構成図を描いてみる - Qiita
PlantUML でクラス図を作成する
PlantUMLにおけるガントチャートの書き方 - Qiita
PlantUMLをWASMに移植してブラウザ上で動かせないか
🚀PHPのソースコードからPlantUMLのクラス図を出力するツール php-class-diagram v0.4.0 をリリースしました
psxnavi.com
www.aviationwire.jp
ramu.nm.bex.jp
scan.netsecurity.ne.jp
digital.asahi.com
hibitotabi.hateblo.jp