chezwicker / vscode-yuml

yUML extension for Visual Studio Code

yUML extension

yUML extension for Visual Studio Code. Allows the creation of offline UML diagrams based on the yUML Syntax.

Features

• Syntax highlighting of .yuml files
• Currently, the following diagram types are supported:
  • Class
  • Activity
  • Use-case
  • State
  • Deployment
  • Package
• Update of yUML diagrams after each file save
• Additional directives for altering diagram type and orientation
• Embedded rendering engine: No need to call an external web service
• Code snippets with samples of each diagram

yUML syntax

Please refer to the wiki page

Invocation methods

Once a .yuml file is open, the viewer window can be invoked in two ways:

• By opening the command pallete and [partially] typing: view yuml diagram (see the screenshot above)
• By clicking the preview icon in the editor title area (see below)
• [Only for VSCode 1.3.x] By right clicking on the document's title tab and selecting the option: View yUML Diagram

Snippets

There is a snippet for each diagram type. Just start typing one of the available diagram types: class, activity, usecase, state or deployment, package and a full example will be pasted into the yuml file.

Top bar

A newly added topbar (see below) will show some useful links when hovered, for accessing the wiki page, writing a review, reporting bugs and requesting new features.

Extension Settings

No settings yet.

Dependencies

This extension only depends internally on viz.js, which is installed automatically. No other product or library is needed and thus the installation process is quietly simple across platforms.

Internals

The following activity diagram depicts the principal steps to generate the UML diagram:

Issue reporting

If you have experience developing Visual Studio Code extensions, please propose a detailed solution for any reported issue or feature request.

Roadmap

• Completion of other diagram types: sequence, components, etc.
• Diagram nesting
• Intellisense for colors

Credits

• Syntax and some examples taken from yuml.me
• This extension uses a Javascript port of Dot/Graphviz called viz.js
• The yuml-to-dot translator is loosely based on a Python project called scruffy