TRY THIS YOURSELF! ➡️ You can create MermaidJS diagrams with LLMs. In this example with Google Gemini 2.5 Flash, I generated a helpful architecture diagram to help some folks understand how Azure CosmosDB works. Give it a shot yourself, in Google AI Studio!
Here's the prompt I used to generate these: "Create a Mermaid JS diagram showing the relationship of Microsoft Azure CosmosDB accounts, databases, containers, documents, and related cloud resources. If any nodes use lighter background colors, make sure the text color is dark, and vice versa. Don't use special characters in node names."
Copy / paste the resulting Mermaid JS code into Mermaid.live, and see the visual result! If it doesn't work quite right the first time, just tweak your prompt to address the issues. A couple iterations is how I came up with this prompt.
Trevor Sullivan
TRY THIS YOURSELF! ➡️ You can create MermaidJS diagrams with LLMs. In this example with Google Gemini 2.5 Flash, I generated a helpful architecture diagram to help some folks understand how Azure CosmosDB works. Give it a shot yourself, in Google AI Studio!
Here's the prompt I used to generate these: "Create a Mermaid JS diagram showing the relationship of Microsoft Azure CosmosDB accounts, databases, containers, documents, and related cloud resources. If any nodes use lighter background colors, make sure the text color is dark, and vice versa. Don't use special characters in node names."
Copy / paste the resulting Mermaid JS code into Mermaid.live, and see the visual result! If it doesn't work quite right the first time, just tweak your prompt to address the issues. A couple iterations is how I came up with this prompt.
3 months ago | [YT] | 12