ICT:Mermaid in VScode

|Title=Streamlined DBML to Mermaid Workflow in VS Code |Description=A guide for converting database schemas from DBML to Mermaid ER diagrams using local VS Code tools and AI. |Category=Documentation, Database Design, VS Code }}

Overview

This workflow replaces the need for external websites (like Mermaid Live Editor) by leveraging VS Code's local ecosystem. It uses AI for conversion and internal extensions for rendering, ensuring your schema data stays within your development environment.

Prerequisites

To use this workflow, install the following VS Code extensions:

• GitHub Copilot: For AI-powered DBML-to-Mermaid conversion.
• Markdown Preview Mermaid Support: To render diagrams inside Markdown files.
• Mermaid Chart: For syntax highlighting and live error checking.

Step-by-Step Workflow

1. AI Conversion (Local)

Instead of using external LLMs, perform the conversion directly on your DBML file:

1. Open your Template:File file in VS Code.
2. Highlight the DBML code block.
3. Press Template:Key+Template:Key to open Copilot Inline Chat.
4. Enter the prompt: Convert this DBML to a Mermaid ER diagram. Wrap the output in a markdown mermaid code block.
5. Click Accept to insert the generated Mermaid code.

2. Real-time Rendering

To view and troubleshoot the diagram:

1. Create or open a Template:File file.
2. Paste the Mermaid code block:

```mermaid
erDiagram
    USER ||--o{ POST : writes
    USER {
        string username
        string email
    }