こんにちは中川です。 先日、 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
PlantUMLのシーケンス図の書き方まとめ
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例 インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
GitHub - plantuml-stdlib/Archimate-PlantUML: PlantUML macros and other includes for Archimate Diagrams
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
VuePressでPlantUMLを使う - Qiita
VuePressのMarkdownに、PlantUMLで書いた図を挿入します。 VuePressはmarkdown-itを使っているので、markdown-it用のプラグインが自由に使えるようです。 markdown-itには、PlantUMLのプラグインがあります。 そちらをVuePressに組み込みます。 まず依存を追加。
はじめに プログラミングをやっていると、設計する時や説明する時などに図解でプログラムの流れなどを説明したりすると思います。 よくあるやつだとdraw.ioやパワポなどを使ってシーケンス図等を使って記述してると思います。 しかしエンジニアたる物できるだけ全てをコードで管理したい！そんな需要に対して最適なのがPlantUMLです！ PlantUMLはオープンソースのUMLダイアグラム作成用のテキストベースの言語である。PlantUMLの言語はドメイン固有言語の一例である[4]。ダイアグラムの表示にはGraphvizを使用している。（wikipedia参照） 具体的には以下のような図を作成することができます シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態遷移図（ステートマシン図） オブジェクト図 配置図 タイミング図 などなど、、、 とてもたくさんあるので全てを
シーケンス図は相互作用図 (interaction diagram) の代表的なダイアグラムです。 シーケンス図は、特定のユースケースに関するオブジェクトの典型例と、オブジェクト間のメッセージを示します。 要素の並び順の制御 (participant)必須の定義ではないですが、participant であらかじめ要素を列挙しておくと、その後のメッセージ定義の順序に関係なく、participant に並べた順に左から要素が配置されます。 @startuml participant Class1 participant Class2 participant Class3 Class3 -> Class1 Class2 -> Class3 Class1 -> Class2 @enduml
This post covers PlantUML basics and how it can be used in GitLab or GitHub projects as well as a seamless local development environment using Visual Studio Code. I have been wanting to write this post for months. Lately I have been using PlantUML extensively at work but also in my private projects. You can see it being used in my plantbuddy and techradar projects on GitHub. Using it in different
PlantUMLの見た目を以前のデフォルト色に戻す - OITA: Oika's Information Technological Activities
PlantUML の今月リリースされたバージョン（V1.2022.2 あたり）から、デフォルトのテーマが変更になって、スタイリッシュな白黒の感じになりました。 以前のデフォルトテーマに戻す方法 あまり文句のある人もいないとは思いますが、あの以前の垢抜けない黄色の感じが好きだったとか、あるいは色弱だと見づらそうといった理由で、昔のスタイルに戻したいという人もいるかもしれない。 その場合は先頭に skin rose を書くだけで、以前の見た目に戻せるようです。 @startuml skin rose ... @enduml 不要になるskinparamあり 以前のデフォルトスタイルだと、影が濃いのが気になるということで skinparam shadowing false を指定して消していた人もいると思いますが、新しいスタイルは最初から影がついていないので、このパラメータは意味がなくなります。
Railsプロジェクトのデータベースの構造のER図をPlantUMLで自動的に吐き出せるようにしてみた - Qiita
モチベーション QiitaでもPlantUMLを表示できるようになってきたのでいよいよPlantUMLが民主化されてきました。 そこで「データベースの情報を基に自動的にER図作ってくれたらいいのになぁ...」と思ったので勢いで作ってみました。 対象となる技術の選定と制限 ER図の特徴の都合上、各種リレーションの定義を取得するためにはORMが使用されているものを対象に作成する必要があります。 今回は以下が使用されている環境を想定してスクリプトを作成・実行しました MySQL Rails これは実行テストを行った対象である 「ハッカソンの開催情報を自動でお知らせするBot HackathonPortal 」 の実行環境に合わせたためです。 同じ Rails でも Postgresql や SQLite においては実行確認していないのでうまくいくかわかりません。(試してみてうまくいったご報告をい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ダイアグラム作成ツール Mermaid を試してみました
シーケンス図をコードベースで管理する（PlantUML） - Qiita
PlantUML でシーケンス図を作成する
Markdown native diagrams with PlantUML