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)
はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ！ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の星の歌詞のフロー図を mermaid.js で描いていきます。 参考↓ 準備 まずは mermaid.js でフロー図を描く際の基本です。 記載規模やお好みでどうぞ VSCode みんな大好き VSCode。拡張機能を入れることで、描きながらプレビューできたり画像出力ができます。Markdown を普段から VSCode で描いている方は下記の1を。そうでない方は2を使うと良いかと思います。 1 https://marketplace.visualstudio.
OpenAPI + Redoc, Docusaurus, Mermaidで始めるスキーマ・ドキュメント駆動開発
OpenAPI + Redoc, Docusaurus, Mermaidで始めるスキーマ・ドキュメント駆動開発 【この本について】 この本はOpenAPIを使ってドキュメントを作成する方法を学びます。 OpenAPIを使ってドキュメントを作成することで継続的な開発を行うことができ、 OpenAPI Generatorを使ってドキュメントと実装のズレをなくすことができます。 また、Docusaurusを使ってドキュメントを作成することで、 運用ドキュメントを簡単に公開することができます。 本書では以下の内容を取り扱っています。 - Docusarusでドキュメント環境を構築する - OpenAPI + Redocでドキュメントを作成する - OpenAPI Generatorで自動生成する - Prismでモックサーバーを導入する OpenAPIを使ってみたい人、社内の設計・運用ドキュメント
どうも、株式会社ナレッジワークのざわきんといいます。 最近よく mermaid というテキストベースの図作成ツールを使っていて、ChatGPTやGitHub CopilotのようなLLMを活用したツールとめちゃくちゃ親和性が高いなと思い、居ても立っても居られないので記事にしました。 TL;DR LLM(Large Language Model)の普及により、テキストベースの図作成ツール（例：mermaid）はますます普及していくと思うので、ガンガン使っていこうぜ！という記事です。 はじめに 言葉によるコミュニケーションの難しさ 突然ですが、言葉によるコミュニケーションって難しいですよね。 頭の中にある構造を言葉だけで相手に正確に伝えることって、なかなか難しいです。 例えば、インフラ構成を説明する場合 例えば、インフラ構成を他の人に説明する場合を考えてみましょう。 ChatGPT に出力して
GitHub - ysk8hori/delta-typescript-graph-action: This GitHub Action uses Mermaid to visualize in a diagram the files that were changed in a Pull Request and their related dependency files.
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
Mermaid入門
はじめに 今回はダイアグラムツールのMermaidについてスキトラを行います。 対象者：Mermaid未使用者 目的：Mermaid記法で作図できるようになること アジェンダ Mermaidとは Mermaidで作成できるダイアグラム ハンズオン まとめ 1. Mermaidとは Mermaidとは、Markdownテキストでグラフを作成できるダイアグラムツールの１つです。 2. Mermaidで作成できるダイアグラム Mermaidで作成できるダイアグラムの一覧です。 フローチャート…今回のハンズオン対象 シーケンス図 状態遷移図 ER図 ユーザージャーニー図 ガントチャート 円グラフ 要件図 Gitグラフ C4C（実験的リリース中） マインドマップ（実験的リリース中） タイムライン（実験的リリース中） 3. ハンズオン 以下の手順でハンズオン準備（VScode）を行います。 新しいウィ
今回はNotionのMermaidに関して書いていきます。 これまでもNotionのMermaidに関して記事を書いています。 関連記事リスト Notion（Mermaid）でER図を書いてみる Notion（Mermaid）でマインドマップを書いてみる 上記の記事を見てもらえば分かるのですが、ER図もマインドマップも色合いが地味です。 記事を書いた当時は、色合いの変更方法が分かりませんでした。 色々と調べてみても分からなかったのでそのまま進めていたのですが、たまたま遭遇した記事で色合い（テーマ）を変更できることを知りました。 今回はその変更方法と、以前の記事で触れたER図とマインドマップに実際にテーマを適用してみます。 それではサクッと本題へ。 参考リンク テーマの変更方法 テーマ変更してみる ER図（読書Notion） コード 指定なし default neutral dark for
About Mermaid | Mermaid
About Mermaid Mermaid lets you create diagrams and visualizations using text and code. It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. If you are familiar with Markdown you should have no problem learning Mermaid's Syntax. Mermaid is a JavaScript based diagramming and charting tool that uses Markdown
クラスメソッドxアノテーションxネクストモード 3社合同Notion交流会 #5を開催しました。(Mermaid解説他) #notion | DevelopersIO
2023年11月15日(水)、クラスメソッドxアノテーションxネクストモード3社による『Notion共有会』の第5回社内イベントを開催しました。 前回第4回の開催内容はこちら： 『Notion共有会』の特集カテゴリはこちら： 当エントリでは、その開催内容についてざっくりではありますが紹介したいと思います。 目次 Notion最新機能紹介(ボタン機能について) Notionで図を描いてみよう！〜ちょっとできるようになるテクニック5選〜 ネクモでサポートしているお客様のいろんな活用事例を紹介！ まとめ Notion最新機能紹介(ボタン機能について) 登壇者：町野誠太郎(ネクストモード株式会社 マーケティング事業部) セッション1つ目はネクストモード町野さんによる特定機能紹介。当回から、Notionの所定の機能に関する紹介をコーナーとして設けてみることにしました。機能を紹介することでNotion
はじめに この記事は Metaps Advent Calendar 2023 の13日目の記事です。 先日のOpenAI DevDayでGPT4の機能を切り替えることなく使用できるAll Toolsや、オリジナルのGPTが作成できるGPTsが導入されるなど、ChatGPTの大幅なアップデートが発表されました。 特にAll Toolsで GPT-4V + Code Interpreter（Advanced Data Analysis）で画像やPDFを使用した柔軟な入力やコード的な指示ができるようになったので、既存の図を読み込ませてMermaid記法で出力させてみました。 資料上の図をMermaid記法で記述したい場合や、編集したいのに元データがない場合などにも使用できると思いますので、参考になりそうな部分をかいつまんで紹介します。 本稿の機能を使用するにはChatGPT Plus(月額20ド
ScrapboxでMermaid記法を可視化するUserScriptを作った話 | 豆蔵デベロッパーサイト
まずはUserScriptでどんなオブジェクトを扱えるかを調べてみようと思います。 ブラウザで任意のScrapboxのページを開き、デベロッパーツールのコンソール上で『window』と入力すると、そのページ上で定義されているグローバル変数の一覧が表示されます。 ここで表示されているグローバル変数は基本的にUserScriptで扱うことができます。 ここで抑えておきたいポイントは、jQueryが使えることと、scrapboxグローバル変数にScrapboxのページ情報が格納されているところです。 scrapboxグローバル変数の構造は大まかに下図のようになっています。 ページ内のコードブロックはscrapbox.Page.linesを辿ることで取得できそうですね。 コードで書くと下記のような感じでしょうか。 const result = []; let text = ""; for (con
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【地上の】mermaid でちょっと大きめの図を描く【星】
図解力を高める！LLMとmermaidで楽しむテキストベースの図作成術
きよごん on X: "人類みんなこのやり方に慣れるといいよ。 ・notion（Excelでもいいよ！）で業務一覧を表で作る ・表をドラッグしてコピーして、ChatGPTに、雑にmermaid記法にして、ってお願いをする。 ・mermaid記法をnotion（/codeでmermaidを選択）に貼り付ける →業務フロー図が完成… https://t.co/Bq1NIeE1Nb"
NotionのMermaidでテーマ（色合い）を変更してみる - みやもとブログ
ChatGPTを使って既存の図をMermaid化してみる - Qiita