mermaid-azure README

Mermaid-Azure は、Mermaid を使用して Azure の構成図を作成するための Visual Studio Code 拡張機能です。

Features

Azureの構成図を Mermaid のフローチャートで簡単に作成できます。
ハブ＆スポークの構成、サブスクリプションやリソースグループの階層構成など、Azure の主要な構成パターンをサポートしています。
以下のコマンドを用意しています
- Architecture : Mermaid の Architecture に対応しています
- Flowchart : Mermaid の Flowchart に対応しています
- architecture-azureicon: Architecture で Azure アイコンを使用します
  - Mermaid で Azure アイコンを使ったアーキテクチャを書き隊 – クラウドを勉強し隊
  - VS Code でも Mermaid で Azure アイコンを使ったアーキテクチャを書き隊 - APC 技術ブログ

動作イメージ

下記の内容で動作確認を行いました

ハブ＆スポークの構成

プロンプト：ハブ＆スポークの構成です。ハブには FW があります。スポークは2つでそれぞれに VM があります。

この拡張機能の更新してみてる
まずは今まで通りの機能
①Mermaid の Flowchart で構成図 pic.twitter.com/qRRG7GzYVq
— Kento (@kenakay01) April 30, 2025

チャット履歴を参照

プロンプト：スポーツにサブネットを追加して、その中に VM を追加してください。またサブネットには NSG を入れてください

続いて新機能
②チャットの履歴を参照できるようにした

作成した構成図の修正が簡単になったー pic.twitter.com/GGquVRNTRc
— Kento (@kenakay01) April 30, 2025

チャット履歴を参照 & コマンドでの使い分け

プロンプト：先ほどと同じものを作成してください少し文法的に正しくない部分がありましたが、概ね正しい構成図を生成してくれました

次は新機能って感じじゃないけど
③プロンプトを見直して architecture-beta に対応させてみた

文法が守れていない部分が若干あるけど、修正するだけやから下書きとしては OK（と思ってる） pic.twitter.com/T8re0l5bQv
— Kento (@kenakay01) April 30, 2025

コンテキストを参照

プロンプト：このファイルでデプロイされる構成図を書いてください

最後の新機能
個人的に一番実現したかったところ

④コンテキストの対応
これで Bicep ファイルから構成図の作成とかが簡単になるはず！！ pic.twitter.com/7CPLJSGxHR
— Kento (@kenakay01) April 30, 2025

## Requirements

以下を参考にしてください Chat extensions | Visual Studio Code Extension API

Extension Settings

以下を参考にしてください GitHub Copilot Extensions (Chat Extention？) を自作し隊 – クラウドを勉強し隊

Known Issues

見つけたら教えてください

Release Notes

0.2.0

プロンプトを見直しました
コマンド [architecture-azureicon] を追加しました
チャット履歴を参照できるようになりました
コンテキストを参照できるようになりました GitHub Copilot Chat のエージェントを更新し隊 – クラウドを勉強し隊

0.1.0

Mermaid の Architecture Diagram に対応
- アイコンの使い方は以下を参考にしてください
- Mermaid で Azure アイコンを使ったアーキテクチャを書き隊 – クラウドを勉強し隊
モデルを gpt4o に変更しました
chatParticipants と command を見直しました

	変更前	変更後
chatParticipants	mermaid	mermaid-azure
command	azure-figure	Flowchart
command	-	Architecture

0.0.1

ブログ用に作成

以下はデフォルトのまま

Following extension guidelines

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

Extension Guidelines

Working with Markdown

You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:

Split the editor (Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
Toggle preview (Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
Press Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.

For more information

Enjoy!

mermaid-azure

Kento Nakayama