ICT:Mermaid in VScode: Difference between revisions

Latest revision as of 20:31, 21 January 2026

Overview

This workflow allows developers to maintain database documentation entirely within VS Code. By converting DBML to Mermaid, you gain access to organic, non-orthogonal line layouts that are easier to read in complex schemas than standard "box" diagrams.

Prerequisites

Install these extensions in VS Code:

Workflow Steps

1. Convert DBML to Mermaid Syntax

Instead of using external websites, use Copilot inside your IDE:

Open your Template:File file.
Highlight the code and press Template:Key+Template:Key.
Enter: Convert this DBML to a Mermaid ER diagram wrapped in a markdown code block.
Click Accept to generate the result.

2. Render and Preview

Create a documentation file (e.g., Template:File) and paste the Mermaid code. In the wiki, it looks like this:

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

Press Template:Key+Template:Key+Template:Key in VS Code to view the preview.
The layout will automatically use curved/oblique lines to minimize cross-overs.

3. Maintenance

Live Editing: Changes to the text are reflected instantly in the side-by-side preview.
Version Control: Save the Template:File file in your Git repository to keep diagrams synchronized with code changes.

Why This Workflow?

Better Visuals: Mermaid avoids the rigid "box-style" orthogonal lines common in dbdiagram.io.
Zero Context-Switching: No need to copy-paste between browser tabs.
Data Privacy: All processing stays within your VS Code environment.

@@ Line 1: / Line 1: @@
 {{ICT:Page
-|Title=Streamlined DBML to Mermaid Workflow in VS Code
+|Title=DBML to Mermaid: Streamlined VS Code Workflow
-|Description=A guide for converting database schemas from DBML to Mermaid ER diagrams using local VS Code tools and AI.
+|Description=A local development guide for converting DBML schemas to Mermaid ER diagrams without using external web tools.
 |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.
+This workflow allows developers to maintain database documentation entirely within '''VS Code'''. By converting DBML to Mermaid, you gain access to organic, non-orthogonal line layouts that are easier to read in complex schemas than standard "box" diagrams.
 == Prerequisites ==
-To use this workflow, install the following VS Code extensions:
+Install these extensions in VS Code:
-* '''[https://marketplace.visualstudio.com GitHub Copilot]''': For AI-powered DBML-to-Mermaid conversion.
+* '''[https://marketplace.visualstudio.com GitHub Copilot]'''
-* '''[https://marketplace.visualstudio.com Markdown Preview Mermaid Support]''': To render diagrams inside Markdown files.
+* '''[https://marketplace.visualstudio.com Markdown Preview Mermaid Support]'''
-* '''[https://marketplace.visualstudio.com Mermaid Chart]''': For syntax highlighting and live error checking.
+* '''[https://marketplace.visualstudio.com Mermaid Chart]'''
-== Step-by-Step Workflow ==
+== Workflow Steps ==
-=== 1. AI Conversion (Local) ===
+=== 1. Convert DBML to Mermaid Syntax ===
-Instead of using external LLMs, perform the conversion directly on your DBML file:
+Instead of using external websites, use Copilot inside your IDE:
-# Open your {{File|.dbml}} file in VS Code.
+# Open your {{File|database.dbml}} file.
-# Highlight the DBML code block.
+# Highlight the code and press {{Key|Ctrl}}+{{Key|I}}.
-# Press {{Key|Ctrl}}+{{Key|I}} to open Copilot Inline Chat.
+# Enter: <code>Convert this DBML to a Mermaid ER diagram wrapped in a markdown code block.</code>
-# 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 generate the result.
-# Click '''Accept''' to insert the generated Mermaid code.
+=== 2. Render and Preview ===
+Create a documentation file (e.g., {{File|schema.md}}) and paste the Mermaid code. In the wiki, it looks like this:
-=== 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
@@ Line 36: / Line 33: @@
          string email
      }
+</pre>
+# Press {{Key|Ctrl}}+{{Key|Shift}}+{{Key|V}} in VS Code to view the preview.
+# The layout will automatically use curved/oblique lines to minimize cross-overs.
+=== 3. Maintenance ===
+* '''Live Editing:''' Changes to the text are reflected instantly in the side-by-side preview.
+* '''Version Control:''' Save the {{File|.md}} file in your Git repository to keep diagrams synchronized with code changes.
+== Why This Workflow? ==
+* '''Better Visuals:''' Mermaid avoids the rigid "box-style" orthogonal lines common in dbdiagram.io.
+* '''Zero Context-Switching:''' No need to copy-paste between browser tabs.
+* '''Data Privacy:''' All processing stays within your VS Code environment.
+[[Category:Database]]
+[[Category:VS Code]]