Visual Studio Code Plantuml

/ Comments off



This is the README for your extension 'language-plantuml' You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts: Split the editor (Cmd+ on OSX or Ctrl+ on Windows and Linux). Windows visual-studio-code plantuml. Improve this question. Follow edited Mar 5 '20 at 22:08. Asked Dec 19 '18 at 17:20. Claire Furney Claire Furney. 1,531 2 2 gold badges 18 18 silver badges 30 30 bronze badges. Add a comment 2 Answers Active Oldest Votes. The GRAPHVIZDOT environment variable is specified in File.

  • Search results for 'plantuml', Visual Studio Code on marketplace.visualstudio.com.
  • Diagrams are defined using a simple and intuitive language. (see PlantUML Language Reference Guide). New users can read the quick start page. There is also a F.A.Q. PlantUML can be used within many other tools. Images can be generated in PNG, in SVG or in LaTeX format. It is also possible to generate ASCII art diagrams (only for sequence.
  • The diagrams are located in a sub-folder named plantuml-gen. Every C4 view in the editor will be enriched with a code lense (Show as Plant UML). When clicking, the corresponding plantuml file will be converted into a svg file, utilizing the free service from kroki.io. The graph is then displayed in a separate window.
Visual studio code plantuml shortcut

This is a VS Code extension for specifying software architecture models with the Structurizr DSL.

Structurizr DSL, known as diagram as text, is the textual representation of the C4 model.

Visual Studio Code Plantuml

This extension is backed by an Xtext grammar, which is used to represent the Structurizr DSL language reference in a formal way.

A generator creates PlantUML diagrams on-the-fly, while editing. The diagrams are located in a sub-folder named plantuml-gen.

Every C4 view in the editor will be enriched with a code lense (Show as Plant UML). When clicking, the corresponding plantuml file will be converted into a svg file, utilizing the free service from kroki.io.The graph is then displayed in a separate window.

Beside that it provides all typical language editor features like:

  • syntax highlighting
  • syntax validation
  • code completion
  • outline
  • code lenses
  • folding
  • re-factoring
  • hover
  • semantic validation

Semantic Highlighting

When describing C4 models textually, there are plenty of raw strings describing different aspects and meta data of a model element. They are visually difficult to be distinguished from each other.

Therefore a semantic highlighting options is provided, in order to highlight the different aspects in different colors (see screenshot below).

You can switch it off (configuration property 'c4.language.SemanticHighlighting') in case it is too dazzling.. It falls back to raw syntax coloring then.

PlantUML Render Options

Supports different PlantUML render options.You can change the renderer by setting the corresponding configuration: c4.plantuml.generator

Default is StructurizrOrigin which is integrating the origin PlantUML preview from the structurizr service.

:warning: StructurizrOrigin seems to have problems with rendering dsl files, that contain !includes.

Visual studio code plantuml preview not working

As an alternative you can use a custom renderer (rendering the graph), implemented by this extension.But again the generators (dsl -> puml) are using the origin structurizr libraries:

Pre-requisites

Visual Studio Code Plantuml Export Png

Xtext requires a Java VM for running the language server.

Visual Studio Code Plantuml

:warning: There seems to be runtime issues with Java 11 or higher. Please use Java 8 instead.

:warning: In some cases (especially reported under MacOS) the language server seems to have missing execution rights. Check <YOUR_HOME>.vscodeextensionssystemticks.c4-dsl-extension-1.1.0serverc4-language-serverbin and add +x if missing to make it executable.

Torrent tool. You must open a workspace, that contains you models, which need to have the file extension .dsl

Multiple workspaces are supported.

Examples

The architecture (i.e. its diagrams) of this extension is modeled with - guess what - the c4 dsl itself.Just open './workspace/c4-dsl-extension.dsl' in your VS Code.

Visual Studio Code Plantuml

The workspace folder does also contain some basic examples from the structurizr dsl website.

Structurizr DSL

Divergences

The goal is, that the Xtext grammar (used in this extension) is compliant to the origin language reference.

However the Xtext grammar is a bit more strict in some points:

  • Double quote characters ('..') are mandatory, even when a property does not contain whitespaces
  • You can't use keywords like person or container as variable names

About !includes

The !include feature is not fully supported. This is due to the fact, that the !include mechanism is pretty different to standard Xtext import functionality. In the strucutizr dsl the content of any included files is simply inlined into the parent document, i.e. you can use it almost everywhere. In Xtext an import has the flavor of an import like in Java.

Currently !includes are only allowed in the context of

  • model
  • softwaresystem
  • styles

Open the big_bank_plc folder as a workspace so see what is possible.

Be aware, that the current implementation of this feature is limited and probably instable.

Unsupported DSL Elements

As of now following DSL elements from the language reference are not yet supported:

Plantuml Extension Vscode

  • deploymentGroups
  • branding
  • configuration

Visual Studio Code Plantuml Cannot Find Graphviz

Those elements will be provided in subsequent releases.