ICT:Mermaid in VScode - Revision history

Mngr at 20:31, 21 January 2026

2026-01-21T20:31:34Z

← Older revision		Revision as of 20:31, 21 January 2026
Line 1:		Line 1:
	\|Title=~~Streamlined~~ DBML to Mermaid ~~Workflow in~~ VS Code		{{ICT:Page
	\|Description=A guide for converting ~~database~~ schemas ~~from DBML~~ to Mermaid ER diagrams using ~~local VS Code~~ tools ~~and AI~~.		\|Title=DBML to Mermaid: Streamlined VS Code Workflow
			\|Description=A local development guide for converting DBML schemas to Mermaid ER diagrams without using external web tools.
	\|Category=Documentation, Database Design, VS Code		\|Category=Documentation, Database Design, VS Code
	}}		}}

	== Overview ==		== 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 ==		== 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>		<pre>
	~~```mermaid~~
	erDiagram		erDiagram
	USER \|\|--o{ POST : writes		USER \|\|--o{ POST : writes
Line 35:		Line 33:
	string email		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]]

Mngr at 20:20, 21 January 2026

2026-01-21T20:20:08Z

← Older revision		Revision as of 20:20, 21 January 2026
Line 1:		Line 1:
	~~{{ICT:Page~~
	\|Title=Streamlined DBML to Mermaid Workflow in VS Code		\|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.		\|Description=A guide for converting database schemas from DBML to Mermaid ER diagrams using local VS Code tools and AI.

Mngr: Created page with "{{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 w..."

2026-01-21T20:19:23Z

Created page with "{{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 w..."

New page

{{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
}