yUML extension for Visual Studio Code. Allows the creation of offline UML diagrams based on the yUML Syntax.
- 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
Please refer to the wiki page
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
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.
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.
No settings yet.
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.
The following activity diagram depicts the principal steps to generate the UML diagram:
If you have experience developing Visual Studio Code extensions, please propose a detailed solution for any reported issue or feature request.
- Completion of other diagram types: sequence, components, etc.
- Diagram nesting
- Intellisense for colors
- 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