Dashin Pro
A VS Code extension that renders interactive diagrams from JSON code blocks in markdown files using React Flow and dagre auto-layout.
Features
- 🎨 Interactive Diagrams - Render beautiful, interactive diagrams from JSON in markdown
- 📊 Multiple Diagram Types - Support for flowcharts, ER diagrams, mindmaps, and more
- 🔄 Auto-Layout - Automatic graph layout using dagre algorithm (no overlapping nodes)
- 🎯 CodeLens Integration - Click-to-open diagram links above code blocks
- 🖱️ Interactive Controls - Zoom, pan, and select nodes in the webview
- 📐 Layout Controls - Change layout direction (TB, LR, RL, BT) with toolbar buttons
- ✅ Error Handling - Clear error messages for invalid JSON
Requirements
- VS Code 1.74.0 or higher
- Node.js (for development)
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions view (Cmd+Shift+X / Ctrl+Shift+X)
- Search for "Dashin Pro"
- Click Install
From Source
- Clone this repository
- Run
npm install to install dependencies
- Run
npm run compile && npm run bundle to build the extension
- Press
F5 to open a new window with the extension loaded
Development
- Run
npm run compile to compile TypeScript
- Run
npm run watch to watch for changes and compile automatically
- Run
npm run bundle to bundle webview assets
- Run
npm run bundle:watch to watch and bundle webview assets
Usage
In Markdown Files
Add a code block with language dashinpro containing your diagram JSON.
Note: The markdown preview integration may not work in all VS Code versions. Use the CodeLens links (see below) for reliable diagram opening.
```dashinpro
{
"type": "flowchart",
"title": "My Diagram",
"nodes": [
{
"id": "1",
"type": "rectangle",
"label": "Start",
"position": { "x": 0, "y": 0 }
},
{
"id": "2",
"type": "rectangle",
"label": "End",
"position": { "x": 200, "y": 100 }
}
],
"edges": [
{
"source": "1",
"target": "2",
"label": "Process"
}
],
"config": {
"direction": "TB",
"autoLayout": true
}
}
```
Opening Diagrams
Method 1: CodeLens Links (Recommended)
- When you open a markdown file with
dashinpro code blocks, you'll see clickable links above each block
- Look for "📊 Open Diagram: [Title]" above the code block
- Click the link to open the diagram in a webview panel
Method 2: Command Palette
- Use Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and search for "Dashin Pro: Open Diagram"
- This will automatically find and open the first valid diagram in the current markdown file
Method 3: Markdown Preview (Limited Support)
- Open markdown preview (Cmd+Shift+V / Ctrl+Shift+V)
- Click "Open Diagram" button in the preview (if available)
- Note: This feature may not work in all VS Code versions due to API limitations
The diagram JSON follows this structure:
{
type: "flowchart" | "mindmap" | "sequence" | "er" | "gantt",
title?: string,
nodes: [
{
id: string,
type: string,
label?: string,
position?: { x: number, y: number },
style?: {
backgroundColor?: string,
borderColor?: string,
textColor?: string,
// ... other style properties
}
}
],
edges: [
{
source: string,
target: string,
label?: string,
type?: "default" | "dashed" | "dotted",
arrowType?: "none" | "arrow" | "arrowClosed"
}
],
config?: {
direction?: "TB" | "LR" | "RL" | "BT",
spacing?: { horizontal: number, vertical: number },
autoLayout?: boolean
}
}
- dashin.pro - AI-powered diagram generator for architecture diagrams, flowcharts, and UML diagrams
- Generate diagrams using AI, then view them interactively in VS Code with this extension
- dashin.pro - AI-powered diagram generator for architecture diagrams, flowcharts, and UML diagrams
- Generate diagrams using AI, then view them interactively in VS Code with this extension
License
MIT
Assets
⚠️ Note: This extension requires an icon file at media/icon.png (128x128 PNG) for VS Code marketplace publication. See ASSETS.md for details.
Assets
⚠️ Note: This extension requires an icon file at media/icon.png (128x128 PNG) for VS Code marketplace publication. See ASSETS.md for details.
