Awesome
ERD Preview
<p align="center"> <a href="https://marketplace.visualstudio.com/items?itemName=kaishuu0123.vscode-erd-preview"> <img src="https://vsmarketplacebadge.apphb.com/version-short/kaishuu0123.vscode-erd-preview.svg"> </a> <a href="https://marketplace.visualstudio.com/items?itemName=kaishuu0123.vscode-erd-preview"> <img src="https://vsmarketplacebadge.apphb.com/downloads-short/kaishuu0123.vscode-erd-preview.svg"> </a> </p>An extension for Visual Studio Code to preview ERD (Entity-relationship diagram) files.
ERD Preview - Visual Studio Marketplace
github.com/kaishuu0123/vscode-erd
Preview
Configuration
Make sure the extension can find the "erd" and "dot" program. <br/>
You can set erd-preview.erdPath
and erd-preview.dotPath
option. <br/>
Please edit settings.json. ([File] -> [Preference] -> [Settings])
Requirements
Use this extension require erd
and dot
command.
You can get erd
command here.
- Single binary my project
- BurntSushi erd
You can get dot
command here.
- Single binary my project
- Official Graphviz dot command
Usage
Preview
- write erd file ( example: https://github.com/kaishuu0123/erd-go/blob/master/examples/simple.er )
- Press
Ctrl+Shift+p
(windows) orCommand+Shift+p
(Mac) and selectERD: Preview Current Window"
Export to file
- Press
Ctrl+Shift+p
(windows) orCommand+Shift+p
(Mac) and selectERD: Save as SVG
orERD: Save as PNG
orERD: Save as PDF
.
Setup
Windows
- Download erd-go from https://github.com/kaishuu0123/erd-go/releases.
- Destination directory Example
C:\Users\(user name)\Tools\windows_amd64_erd-go.exe
- Download dot program from https://github.com/kaishuu0123/graphviz-dot.js/releases
- Destination directory Example
C:\Users\(user name)\Tools\graphviz-dot-win-x64.exe
- When you want to use png output
- Install graphviz
- https://www.graphviz.org
- edit vscode settings.json
{ "erd-preview.erdPath": "C:\\Users\\(user name)\\Tools\\windows_amd64_erd-go.exe", "erd-preview.dotPath": "C:\\Users\\(user name)\\Tools\\graphviz-dot-win-x64.exe", }
- When uou want to use png output
- Please search dot.exe program path.
- ex.) C:\Program Files(x86)\Graphviz2.30\bin\dot.exe
- When uou want to use png output
MacOSX
Use binary
- Download erd-go from https://github.com/kaishuu0123/erd-go/releases.
- Destination directory Example
/Users/(user name)/tools/darwin_amd64_erd-go
- Download dot program from https://github.com/kaishuu0123/graphviz-dot.js/releases
- Destination directory Example
/Users/(user name)/tools/graphviz-dot-macos-x64
- When you want to use png output
- Install graphviz
- https://www.graphviz.org
- edit vscode settings.json
{ "erd-preview.erdPath": "/Users/(user name)/tools/darwin_amd64_erd-go", "erd-preview.dotPath": "/Users/(user name)/tools/graphviz-dot-macos-x64", }
- When uou want to use png output
- Please search dot command path.
- When uou want to use png output
Use homebrew
- Install erd-go from homebrew
$ brew tap kaishuu0123/erd-go $ brew install erd-go # install check $ erd-go
- Install dot program(graphviz) from homebrew
$ brew install graphviz # install check $ dot
- Install this extention to Visutal Studio Code.
Linux
- Download erd-go from https://github.com/kaishuu0123/erd-go/releases.
- Destination directory Example
/home/(user name)/tools/linux_amd64_erd-go
- Download dot program from https://github.com/kaishuu0123/graphviz-dot.js/releases
- Destination directory Example
/Users/(user name)/tools/graphviz-dot-linux-x64
- When you want to use png output
- Install graphviz
- https://www.graphviz.org
- edit vscode settings.json
{ "erd-preview.erdPath": "/home/(user name)/tools/linux_amd64_erd-go", "erd-preview.dotPath": "/Users/(user name)/tools/graphviz-dot-linux-x64", }
- When uou want to use png output
- Please search
dot
command path.
- Please search
- When uou want to use png output
Development
- Clone this repo.
$ git clone git@github.com:kaishuu0123/vscode-erd.git
- Open by vscode
$ cd vscode-erd
$ code .
- Press F5 Key
Credits
This work is based off of several existing projects: