Rich PlantUML support for Visual Studio Code.
Latest version has changed the include files search logic, using
diagramsRoot as base directory, which makes including path consistent across all files in workspace folder.
If you encounter include problem in your existing projects, to restore previous logic, please add following to workspace settings:
To new projects, it's recommended to use default setting, since it's more easy to manage.
exportOutDirName has been changed to
exportOutDir, it now accepts a relative path rather than only a folder name. Work together with
diagramsRoot, you can (for example):
"plantuml.diagramsRoot": "docs/diagrams/src", "plantuml.exportOutDir": "docs/diagrams/out"
You'll get export results like:
Project Folder/ docs/ diagrams/ src/ architecture_overview.wsd out/ architecture_overview.png
Get 15X times faster export by utilizing PlantUML Server as render. How to?
- Preview Diagram, Press
Alt-Dto start PlantUML preview.
- Auto update.
- Zoom & scroll support.
- Multi-Page Diagram support.
- Instant preview, if diagram's been exported.
- From local or server.
- Snap to Border
- Export Diagrams
- At cursor, in current file, in whole workspace, in workspace selected.
- Concurrent export.
- Generate URLs.
- Multi-Page Diagram support.
- From local or server.
- Image map (cmapx) support.
- Editing Supports
- Format PlantUML code.
- All type syntax highlight.
- All type snippets.
- Basic auto completion & macro signature support NEW!!
- Symbol List support.
- Auto Include.
- Multi-root Workspace Support.
- MarkDown integrating support. View Demo
- Extracting source from images support.
Notice: If you use customize
plantuml.jar, please update to the latest version to enable
Multi-Page Diagram support. (Later than
How to install
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install plantuml
Depend on which render you choose, plugin has diffrerent requirements.
Requirements for PlantUMLServer render
A plantuml server. See Use PlantUML Server as render.
Requirements for Local render
It's necessary to have following installed:
- Java : Platform for PlantUML running.
- Graphviz : PlantUML requires it to calculate positions in diagram.
Plugin has integrated a copy of "plantuml.jar", you are good to go now. But if you want to use your own jar (maybe a newer version, or with many dependent jars), specify the jar location with setting
If you've installed java, but still prompts "java not installed", please add java bin path to
For windows user, majkinetor introduced a way to install plantuml and its dependencies easily. Run
cmd.exe as Administrator, and run two commands as follow
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin" choco install plantuml
Preview page provides various zoom/pan actions and snap feature:
- Zoom operations (since version 2.7.0):
- Zoom to select area
- Pinch to zoom (TouchPad)
- Click to zoom in, alt + click to zoom out
- Ctrl + mouse scroll to zoom in/out
- Middle mouse button click to toggle zoom
- Zoom in / zoom out / toggle buttons of the controls bar.
- Pan operations (since version 2.7.0):
- Right mouse button drag
- Two-finger move to pan (TouchPad)
- Mouse scroll
- Snap to border (since v2.8.0):
- Scroll to most bottom/right/top/left, preview will snap to that border.
e.g. Snap to Bottom is useful while writing long activity diagrams, which helps you keep focus in the latest part in the bottom.
zoom & scroll:
Extract Diagram Source
PlantUML formatter is disabled (since v2.8.3) if
editor.formatOnSaveis on. Because the formatter is not reliable enough according to user feedbacks.
This plugin integrates all type diagram snippets. They are splitted into 9 sections:
diagram: snippets for general diagrams elements.
activity: snippets for activity diagrams.
class: snippets for class diagrams.
component: snippets for component diagrams.
state: snippets for state diagrams.
usecase: snippets for usecase diagrams.
sequence: snippets for sequence diagrams.
ui: snippets for salt diagrams.
egg: snippets for some funny diagrams, like sudoku, earth.
For exsample, type
acife (short version) to trigge following snippet (
if (cond1?) then (val1) else (val2) endif
About Symbol List (List diagrams of file)
Ctrl+Shift+O to list all diagrams in the file. You can name the diagram when diagram starts.
@startuml diagram name sudoku @enduml
Plugin supports two renders:
Local is the default and traditional way. If you care more about export speed, you should try PlantUMLServer.
Local: 6 documents, 9 digrams, 14 files exported in 24.149 seconds PlantUMLServer: 6 documents, 9 digrams, 14 files exported in 1.564 seconds
Advantages and Disadvantages of PlantUMLServer Render
- 15X times faster export and much quicker preview response.
- Don't have to set local enviroments if you have a server in your team.
- You don't need
plantuml.exportConcurrency, because it's unlimited in concurrency.
- Cannot render very-large diagrams (HTTP 413 error).
- Cannot render diagrams with
- Less format support: png, svg, txt.
- Some settings are not applicable:
Use PlantUML Server as Render
You may already have a PlantUML server in your team, find the server address, like:
If don't have one, you can set up on you own (follow the instructions). Find the server address, like:
http://192.168.1.100:8080/plantumlwhich is ready for sharing to your team.
Open user setting, and configure like:
"plantuml.server": "http://192.168.1.100:8080/plantuml", "plantuml.render": "PlantUMLServer",
About Auto Include
Notice: People who don't use
!includecould ignore this chapter.
Auto Include liberates you from writing "!include path/to/include.wsd" everywhere. which is bother & hard to manage.
Suppose we have 2 files to include:
myStyles.wsd, and they are organized as follow:
├── includes │ ├── defines.wsd │ └── myStyles.wsd ├── sources │ ├── sourceA.wsd │ └── sourceB.wsd ├── out
In the past, we have to include them manually in every single diagram:
@startuml !include ../includes/defines.wsd !include ../includes/myStyles.wsd 'contents goes here... @enduml
Now, you can just replace them with a placehold
@startuml 'AutoInclude 'contents goes here... @enduml
and open workspace setting and config:
"plantuml.includes": [ "includes" ]
About integrated theme
Plugin shipped with a blue diagram theme, to enable it, config like:
"plantuml.includes": [ "styles/blue" ]
Multiple languages support
@startuml / @enduml is still recommended, so that PlantUML code in Markdown can be managed by other function of this plugin.
This extension contributes the following settings.
plantuml.render: Select diagram render for both export and preview.
PlantUMLServer Render Settings:
plantuml.server: PlantUML server to generate UML diagrams on-the-fly.
Local Render Settings:
plantuml.java: Java executable location.
plantuml.commandArgs: commandArgs allows you add command arguments to java command, such as
plantuml.jar: Alternate plantuml.jar location. Leave it blank to use integrated jar.
plantuml.jarArgs: jarArgs allows you add arguments to plantuml.jar, such as
plantuml.includes: Files or folders to include before preview/export diagrams. You don't have to write "!include path/to/include.wsd" for every single diagram any more.
plantuml.diagramsRoot: Specifies where all diagram files located (releative to workspace folder).
plantuml.exportOutDir: Exported workspace diagrams will be organized in this directory (releative path to workspace folder).
plantuml.fileExtensions: File extensions that find to export. Especially in workspace settings, you may add your own extensions so as to export diagrams in source code files, like ".java".
plantuml.exportFormat: format to export. default is not set, user may pick one format everytime exports. You can still set a format for it if you don't want to pick.
plantuml.exportSubFolder: export diagrams to a folder which has same name with host file.
plantuml.exportConcurrency: decides concurrency count when export multiple diagrams.
plantuml.exportMapFile: Determine whether export image map (.cmapx) file when export.
plantuml.previewAutoUpdate: Dedecides if automatically update the preview window.
URL Generating Settings:
plantuml.urlFormat: URL format. Leave it blank to pick format everytime you generate a URL.
plantuml.urlResult: URL result type. Simple URL or ready for MarkDown use.
Please post and view issues on GitHub
- Japanese: Kohei Arao
- Tranditional Chinese: Alan Tsai
- German: Fabian F.
- French: Zepmanbc, FlorianKempenich
Thanks for your encouragements!
Claus Appel, 三島木一磨, 富吉佑季, 黒田悦成, Jared Birdsall, Suleyman Cabir Ciplak, Malcolm Learner, Сысоев Максим