Mermaid Graphical Editor - Visual Studio Marketplace
Mermaid Graphical Editor Mermaid の編集を GUI サポートするエディタビューを表示することができます。現在、フローチャートとシーケンス図の一部の編集のみ GUI サポートに対応しています。 GUI サポートで対応していない記述（フローチャートの Direction や Subgraphs など）は、Mermaid コードの方を直接編集することで反映されます。 You can display an editor view with GUI support for Mermaid editing. Currently, GUI support is supported only for editing some parts of the flowchart and sequence. Descriptions not supported by GUI supp
DB設計書の管理が楽になるDBML入門 – DBMLの書き方,dbdiagram.io, dbdocs の紹介 – | SIOS Tech. Lab
こんにちは！サイオステクノロジーの安藤 浩です。DB設計書の生成が容易にできるDBMLをご紹介します。DBMLの入門として、DBMLの書き方、ER図生成方法、Github actionsでCIを実行して閲覧する方法をご紹介させていただきます。 DBMLとは DBML は DataBase Markup Language の略でDB構造を定義するために設計された言語です。 DB構造に焦点を当てており、可読性の高い言語です。 dbdiagram.io や dbdocs.io などを利用することでDBドキュメントの生成が可能です。 コードベースで図を生成できる点でPlantUMLと似ていますね。 DBMLの書き方 テーブルの書き方 まずはテーブルの定義の例をもとにDBMLの記法を紹介していきます。users というテーブルを作成してみます。コードは以下のようになります。 Table users
VSCode版CSharp to PlantUMLでC＃のクラス図を作る
導入は割と面倒くさいです コードのクラス図の書き起こしを1回ちょっとやってみたいだけ、 であるならChat-GPTにコード貼って書き起こしてもらうほうが楽＆早い インストール環境 VSCode版PlantUMLをインストール済であること Windows 11 VSCode 1.87.2 インストールしたVSCode拡張機能 事前にVSCode版PlantUMLインストール済である PlantUML設定は”Local”を前提としている ID: pierre3.csharp-to-plantuml 説明: Generator to create class-diagram of PlantUML from C# source code. バージョン: 1.4.0 パブリッシャー: pierre3 VS Marketplace リンク: https://marketplace.visualstu
詳細設計の書き方 - Qiita
はじめに システム開発において詳細設計という工程があります。 プログラマーはこの詳細設計を確認しながら開発を行うことになります。そのため詳細設計ではシステムの構造や仕様、動作などを細かく定義することが必要になります。 詳細設計を行うことでシステム開発の方向性が明確になり、コーディングやテストをスムーズに行うことができます。 詳細設計の成果物としてはクラス図やシーケンス図、画面設計書やデータベース設計書などがあり、システムの動きや機能を具体的に表現するものです。 今回は詳細設計を作成する機会があったので、詳細設計の書き方についてまとめたいと思います。 詳細設計の目的やメリット 詳細設計の目的は、システム開発の品質や効率を向上させることです。詳細設計では、システムの仕様や動作を細かく定義することで、以下のようなメリットがあります。 開発工程でのバグや遅延を減らすことができる テスト工程での不具
dbtで見やすいER図を生成する - yasuhisa's blog
背景: dbtを使っていてもER図は欲しい! どうやってER図を生成するか どうやってER図を見やすくするか まとめ 背景: dbtを使っていてもER図は欲しい! dbtはモデル間のリネージなど可視化が得意なツールではありますが、万能なわけではありません。モデルの生成過程などはリネージで担保できますが、分析時に「どれとどのモデルがJOINできて、JOINする際のキーはこれを使って」というER図で扱うような可視化はディフォルトではできません。 DWHを作っている側からすると「このテーブルはあの辺のテーブルと一緒に使うと便利で、いつもあのキーでJOINして」というのが頭の中に入っていることが多いため、ER図がなくてもどうにかなることも多いでしょう。しかし、分析に慣れていない人や分析に慣れている人であっても、普段と異なるドメインのテーブルを触るときはER図が提供してくれる情報は有用です。ちなみに
マリオカートのER図について考える - Qiita
さて、 今回はオフィスにて「ER図とは？」を学ぶランチを開催しました🍔 ゲームのDBなんて考えたことが無いので、ER図アウトプットに至るまでを記事に残してあげようと思います。 今回は、リリース時に同僚みんなで遊んでいたスマホゲーム「マリオカート ツアー」を使って マリカーのフレンドランキング画面を出すために必要なDB設計を考えます。 軽いランチなので、事前に参加者が通勤中の電車内で作成できるくらいのボリュームを目指しました。 データベースとは・・・？という初心者メンバーでもイメージしやすいように。 こういうアウトプットは初めてですが、徐々に慣れていきたいです。 【開催概要】 ・参加者：ファッションIT企業のPM、エンジニア、事務・・・などなど ・開催時間：1時間（事前アウトプット作成：20〜30分程度） ・その後：SQLを初心者と書いてみるランチも実施しました。 →BigQueryがSQ
PlantUMLでそれなりにきれいなAzure構成図を描いてみる - Qiita
はじめに PlantUML はテキストで作図できるため、作図のために別ツールを起動して、画像で出力して、という手順がなく Markdown 内でちょっとした図を作成する際に便利です。 PlantUML には AWS や Azure のアイコンライブラリがあり、クラウド環境の構成図も作成できます。AWSは PlantUML で作図した事例も多く、例えば以下のような解説記事があります。 一方でAzureはあまりQiitaで解説された事例があまり見つからなかったので、今回書いてみることにします。 完成図 Microsoft Learn にあるNATゲートウェイのチュートリアルの構成図を参考に以下の図を作成しました。 作成した図 参考にした図 画像引用元: https://learn.microsoft.com/ja-jp/azure/nat-gateway/quickstart-create-n
ChatGPTで図を書いてもらう方法（誰にでもできます） - Qiita
はじめに ChatGPTで図を書いてもらい、感動しているので共有します。 手順 キーワード+ 「mermaidJSで図解して」をつける MermaidJSのエディターで確認orNotionのコードブロックで確認 1. キーワード+ 「MermaidJSで図解して」をつける ※ChatGPT3.5は文法ミスがたまにあるので、その場合は自分直したりします。 今回は,ChatGPT4.0で試しました 例：Facade デザインパターンをMermaidJSで図解して教えて Qiitaのコードブロックだと以下のように表示されます。 usersの部分が文字化けしてますね、 2. MermaidJSのエディターあるいはNotionのコードブロックで確認 Qiitaやzennでも利用できるはずです MermaidJS Editer さいごに 正直、Excelやパワポで絵を書くのはだるいです。 コンポーネン
ChatGPTにマインドマップを作ってもらったら理解速度が爆速になる件｜Abiru
こんにちは。 ECコンサル会社を経営している、あびるです。 今回はChatGPTでマインドマップを作る方法をご紹介します。 この方法を使えば、長くて難しくて読みたくない文章も、情報が小分けされた状態で視覚的に分かりやすくなります。 プロンプト例太宰治の走れメロスのストーリーについてマインドマップにまとめて、PlantUMLで出力してください。出力結果 @startmindmap !define AWESOME mindmapBackgroundColor White * 走れメロス ** 主要登場人物 *** メロス **** 無実の罪で逮捕 **** 王に誓いを立てる **** 結婚式へ向かう **** 友人セリヌンティウスに会う **** 王に戻る *** セリヌンティウス **** メロスに協力 **** 王のもとで身代わりに *** 王 **** 独裁者 **** メロスを逮捕 *
GitHubでMermaid構文の表示機能が強化されていました | DevelopersIO
こんにちは、CX事業本部 Delivery部の若槻です。 今回は、GitHubでMermaid構文の表示機能が強化されていたので共有します。 Mermaidとは Mermaidとは、Markdown構文の拡張ツールで、様々なタイプの図（Diagram）をコードやテキストで記述し、視覚的に表示することができます。 Mermaid構文を利用することにより、次のような図をMarkdownで記述することができます。 Flowchart Sequence Diagram Gantt Chart Class Diagram State Diagram Pie Chart Git Graph 公式サイトより引用 GitHubでのMermaid構文の表示機能が強化されていた GitHubではMermaid構文をサポートしており、MarkdownファイルにMermaid構文を記述することで、図を表示すること
ChatGPT×MarkMap: 簡単マインドマップ生成 - Qiita
概要 マインドマップはトニー・ブザンという人が提唱した、「頭の中を書き出す」ことに優れた図の書き方です。 中央にテーマを書き、枝分かれする形でサブテーマ、サブテーマのサブテーマを書いていきます。 そしてMarkMapはマインドマップをマークダウン記法から生成してくれるライブラリです。 今回はそのVSCode拡張機能を使いました。 最後にChatGPTは皆さんご存知のAIとチャットできるWebサービスです。 今回はこれらを組み合わせて、いろんな物事のあらましを素早く掴める状態にしたいと思います。 必要なプロンプト 驚いたのですが、ChatGPTはすでにMarkMapの特徴を知っています。 はい、markmapというライブラリを知っています。markmapは、マークダウン形式のテキストをマインドマップに変換するJavaScriptライブラリです。このライブラリを使うと、マークダウンの見出しやリ
Blog - Smart diagram generation for more template diagrams
When you create a new diagram with the draw.io web editor, you can now choose to use our new smart diagram generator instead of one of our existing templates. Describe your diagram in a text phrase, and the tool will generate a diagram based on what it parses. For example, this entity relationship model was generated from the phrase “a customer purchases a product from a web store”. As these smart
ドメインエキスパート/エンジニアと語るDDD実践例 [CTO meetup イベントレポート] - FLEXY（フレキシー）
※本記事は2023年3月に公開された内容です。 2023年2月9日に開催されたCTOmeetupのテーマは、ドメイン駆動設計（以降、DDD）です。 DDDのアウトプット方法は複数存在し、実際に導入しても何から始めればいいのか悩まれてしまうエンジニアの方は多いのではないでしょうか。 「DDD＝難しい」というイメージから脱却し、具体的な開発イメージを膨らませるにはどうしたらいいのか。 今回はこの点について、特にモデリングに着目をしてディスカッションを実施。DDDの関連書籍の出版やYouTube、Twitter発信をされているログラス社の松岡さんをはじめ、エンジニアの村本さん、ドメインエキスパートの浅見さんをお招きして、DDDの実践例と開発のポイントについて解説いただきました。 CTO関連の求人案件の検索はこちらから ドメイン駆動設計に関する目線合わせ DDDの目的 松岡氏： 私はログラスに2年
![ドメインエキスパート/エンジニアと語るDDD実践例 [CTO meetup イベントレポート] - FLEXY（フレキシー）](https://cdn-ak-scissors.b.st-hatena.com/image/square/858da213ea908a57a7316a6e230154efbfeaa181/height=288;version=1;width=512/https%3A%2F%2Fflxy.jp%2Fmedia%2Fwp-content%2Fuploads%2F2023%2F01%2FCTO-meetup_20230209_1200_630.png)
【VSCode】PlantUMLの導入方法 - Qiita
VSCodeの拡張機能をインストールします。 以下のいずれかの拡張子のファイルを作成します。 *.wsd *.pu *.puml *.plantuml *.iuml 作成したファイルの内容を編集します。 @startuml Sample hide circle skinparam linetype ortho entity user as "user" { *user_id [PK] -- created_at [作成日] updated_at [更新日] } entity user_profile as "user_profile" { *user_profile_id [PK] -- *user_id [FK] name [名前] email [メールアドレス] password [パスワード] created_at [作成日] updated_at [更新日] } entity po
これからのText to DiagramツールはD2で決まり！ - Qiita
この記事について ドメイン固有言語(DSL: Domain-Specific Language)の1つであり、Declarative Diagrammingの略であるD2言語の環境構築、および簡単な作図例を示したものです。 D2とは 2022年11月22日にオープンソースとなったドメイン固有言語です。MPL-2.0ライセンスの元公開されています。 Mermaid, Graphviz, PlantUMLとの比較を行えるサイトもD2の開発元であるTerrastructによって公開されています。 一部抜粋したものが次の表になります。 他のText to Diagramツールと比較して、D2では様々な機能が追加されていることが分かります。 特徴 D2 PlantUML MermaidJS GraphViz
mermaidを使って図を楽に作ろう！ - Qiita
はじめに この記事はHRBrain Advent Calendar 2022 カレンダー2の8日目の記事です。 こんにちは！株式会社HRBrainでエンジニアをしているZamaです。 プロダクト開発の様々な場面で色々なドキュメントを作成すると思いますが、正直大変だったり面倒くさかったりしますよね... しかし実装前の認識合わせや既存の設計や機能の確認などにドキュメントは書いておいた方がいいのも事実。 そこでドキュメント作成において図を楽に追加できるmermaidを紹介します！ ※以下の内容は2022年12月8日時点のものになります。 mermaidとは mermaidとは、MarkdownにインスパイアされたJavaScriptベースのダイアグラム・チャート作成ツールです。 Markdownのコードブロック内に図をテキストとして書いていきます。 GitHub、Qiita、Notionは標準
図を書くのに苦労してますか？じゃPlantUML might be for youです - Qiita
Table of Contents 図を書くのに苦労してますか？じゃぁPlantUML might be for youです UMLってなに？ PlantUMLでどんな感じな図ができるの？ Use case diagram State machine diagram Activity diagram Deployment diagram Sequence diagram Class diagram PlanUMLの良いところ・悪いところ 良いところ 悪いところ Try it out! 図を書くのに苦労してますか？じゃPlantUML might be for youです PlantUMLはテキストでUMLの図を作成できるツールです。こんな感じです。 個人的にPossibly the best tool of my lifeなので紹介します。 使うかどうかの判断材料にしてください。 UMLっ
C#のソースコードからPlantUMLのクラス図を生成するツール PlantUmlClassDiagramGenerator 1.3.0 をリリースしました！ - Qiita
C#のソースコードからPlantUMLのクラス図を生成するツール PlantUmlClassDiagramGenerator 1.3.0 をリリースしました！C#.NETPlantUML PlantUmlClassDiagramGenerator 1.3.0 C#のソースコードからPlantUMLのクラス図を生成するツールのversion 1.3.0 をリリースしました！ 本バージョンから、生成元のソースコードに属性を付けることで、出力内容を柔軟に制御できるようになりました。 VSCode Extension Visual Studio Codeの拡張機能としても利用できます！ 属性を使ったカスタマイズ機能の追加 本ライブラリには元々プロパティやフィールドからクラス間の関連を自動生成する機能も付いているのですが、あまり細かい制御ができず使い勝手が良くありませんでした。 そこで、クラスやプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mermaid | Diagramming and charting tool
Text to diagram
