ICT:Mermaid in VScode

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:

• GitHub Copilot
• Markdown Preview Mermaid Support
• Mermaid Chart

Workflow Steps

1. Convert DBML to Mermaid Syntax

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

1. Open your Template:File file.
2. Highlight the code and press Template:Key+Template:Key.
3. Enter: Convert this DBML to a Mermaid ER diagram wrapped in a markdown code block.
4. 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
    }

1. Press Template:Key+Template:Key+Template:Key in VS Code to view the preview.
2. 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.