View source for ICT:Mermaid in VScode

{{ICT:Page
|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:
* '''[https://marketplace.visualstudio.com GitHub Copilot]''': For AI-powered DBML-to-Mermaid conversion.
* '''[https://marketplace.visualstudio.com Markdown Preview Mermaid Support]''': To render diagrams inside Markdown files.
* '''[https://marketplace.visualstudio.com 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:
# Open your {{File|.dbml}} file in VS Code.
# Highlight the DBML code block.
# Press {{Key|Ctrl}}+{{Key|I}} to open Copilot Inline Chat.
# Enter the prompt: <code>Convert this DBML to a Mermaid ER diagram. Wrap the output in a markdown mermaid code block.</code>
# Click '''Accept''' to insert the generated Mermaid code.

=== 2. Real-time Rendering ===
To view and troubleshoot the diagram:
# Create or open a {{File|.md}} file.
# Paste the Mermaid code block:
<pre>
```mermaid
erDiagram
    USER ||--o{ POST : writes
    USER {
        string username
        string email
    }