With the last update, an old issue has come back: jaime-olivares/vscode-yuml#23

// {type:class}
// {direction:topDown}
[note: You can stick notes on diagrams too!{bg:cornsilk}]
[Customer]<>1-orders 0..*>[Order]
[Order]-[note:asdf]

This fails with "Error composing the diagram".

I have a fix for it: aduh95/yuml2svg@9f8acd4 and aduh95/yuml2svg@0b9f53d.

Do you want me to open a PR?

Allowing for simple things such as bold, or underline. Would be great!

version 1.2
question： It seems that the second space disappear；
the text is blow

// {type:class}
[Customer|🔑 custId;...{bg:#FFF5E6}]
[Customer Certificate|🔑 certId;...{bg:#FFF5E6}]
[Customer Contact|🔑 contactManId;...{bg:#FFF5E6}]
[Customer Contact Attribute|🔑 contactManId;🔑 attrId;...{bg:#FFF5E6}]
[Customer Attributes|🔑 custId;🔑 attrId;...{bg:#FFF5E6}]
[Customer Special Group|🔑 custSpecialGroupId;...{bg:#FFF5E6}]
[Customer Group|🔑 custGroupId;...{bg:green}]
[Customer Manager|🔑 custManagerId;...{bg:#FFF5E6}]
[Customer Contract|🔑 contractId;...{bg:#FFF5E6}]
[Customer Contract Item|🔑 contractItemId;...{bg:#FFF5E6}]
[Customer Contract Item Attribute|🔑 contractItemAttrId;...{bg:#FFF5E6}]
[Customer Social Meidia|🔑 custSocialNbrId;...{bg:#FFF5E6}]
[Account|🔑 acctId;...{bg:#FFF5E6}]
[Subscriber|🔑 subsId;...{bg:#FFF5E6}]
[Customer Document|🔑 custDocId;...{bg:#FFF5E6}]

[Customer][Customer Certificate]
[Customer]<1-N>[Customer Contact]
[Customer Contact]<1-N>[Customer Contact Attribute]
[Customer]<1-N>[Customer Attributes]
[Customer]<1-N>[Customer Special Group]
[Customer]<1-N>[Customer Group]
[Customer]<1-N>[Customer Manager]
[Customer]<1-N>[Customer Contract]
[Customer Contract]<1-N>[Customer Contract Item]
[Customer Contract Item]<1-N>[Customer Contract Item Attribute]
[Customer]<1-N>[Customer Social Meidia]
[Customer]<1-N>[Account]
[Customer]<1-N>[Subscriber]
[Customer]<1-N>[Customer Document]

render

The UML convention/standard is to render abstract classes and methods in italics typeface.
Is this possible in a yuml class diagram, and if so, how do you mark the class/method name as abstract/italics?

FYI:

But tnx for your plugin!

If I code something like this:

[Node|+fld1: string;+fld2:string;-fld3: number]

I don't get the fields rendered into the svg as part of the class.

yuml.me renders this style of yuml just fine, as does the VS Code plugin. Though the VS Code plugin doesn't seem to set the text colour right when you do this and it breaks the middle fld2 line across two lines.

It would be awesome to make it work in a browser environment. I‘d love to write a docsify plugin.
I tried browserify but the resulting 8.5MB file is hardly usable.
Cheers, matti

I installed this via the Visual Studio code extension and can see it output properly. How do I save the output as an SVG file?

As reported in jaime-olivares/vscode-yuml#43

There seems to be a problem with in class diagrams preview, the class name was displayed enclosed by braces.
When the class was defined including attributes the braces open before the class name and close after last attribute.

I can see it happens with topDown but not with leftToRight

// {generate:true} doesn't appear to be making an svg on Mac.

// Test
// {type:state}
// {generate:true}

(start)[Start]->(Test running)
(Test running)[Pause]->(Paused)
(Test running)[Stop]->(end)
(Log retriveal)[Continue]->(Test running)

VS Code Version 1.23.1
Mac 10.13.4 Hiigh Sierra

I don't see anything in the dev tools console log. Though occasionally a memory leak warning with no other plugins installed:

console.ts:136 [Extension Host] (node:15488) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 unhandledRejection listeners added. Use emitter.setMaxListeners() to increase limit

Typically happens when opening or closing the view diagram window.

When i create yuml file to describe my classes, i found out that the first space cannot be show. Between X and Y, that space will change Y to new line, but what i want is to make X and Y in one line. Please fix that. thx.
[ZZZ | X Y; Z;]

Hi,

Your lib seems very interesting. But I can't find a way to choose where to save files (on node), or where it is added in the page. It would be convinient if there were an API method that returns the SVG generated, without doing anything more (which is more application-dependant).

Switch between documents types is hardcoded. It would be great if it were extensible so that anyone can register processing functions simply.

A proper API documentation, informing about methods signatures would be great too.

So what do you plan to do with the lib ?

(node:5597) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 uncaughtException listeners added. Use emitter.setMaxListeners() to increase limit

Hi, I'm evaluating your vscode extension: looks brilliant so far.

I think there is a typo here though:

It seems the syntax should be:

Note         [Actor]->[note: a note message]

Not:

Note         [Actor]-[note: a note message]

Source: https://github.com/jaime-olivares/yuml-diagram/wiki

I noted that when you start typing in any yuml file 'type:'... it auto suggests and when choosen it completes with an example.

First of all; that is awesome!

Next: I don't know how to use it, as it replaces only some of the text, so it has:

• a dangling }
• a prefix // {type:... and then again // {type:

e.g.:

// {type:// {type:sequence}
[:Computer]sendUnsentEmail>[:Server]
[:Computer]newEmail>[:Server]
[:Server]reponse.>[:Computer]
[:Computer]downloadEmail>[:Server]
[:Computer]deleteOldEmail>[:Server]}

Am I using this wrong?

Hello Jaime,
this is a very nice tool. I'm trying to use it for documentation, in parallel with development. the result should then be referenced in markdown.
Would it be possible to generate jpg or png?
Maybe in the form {generate:png;size=120%}
TNX

In a class diagram, the following does not render the background color:
[Class|Attribute{bg:green}]
This does:
[Class{bg:green}]
It does work on yuml.me (example), so I expect the syntax is right.

Also, white text on green background is hard to read, are there cases where black on green doesn't work?

Hi Jaime, I've tried to update your wiki page, however the process seems different than from code. Anyways; here's my proposal attached.
Archive.zip

Hi,
Using yuml for some time. It is awesome.
Please support the nested package for {type:package}.
If so, when?

Hi all,
when debugging yuml-diagram in vscode, I run into a 'file not found error":

The call stack leading to the error is the following:

yumlExample.js has the following content:

To fix that, in the loadColors function, rather than having:

var rgb = fs.readFileSync(__dirname + "/../data/rgb.txt", {encoding:"utf8", flag:"r"}).split('\n');

We should have:

var rgb = fs.readFileSync(__dirname + "/../../data/rgb.txt", {encoding:"utf8", flag:"r"}).split('\n');

I will make a pull request for this.

Regards,

It seems that the angle bracket have strange behavior, may the image says my mind.

It's not putting in the correct line breaks in the svg.

// {type:class}
// {direction:leftToRight}
// {generate:true}

[Customer|Forename;Surname;Email|Save()]

Hi,

First, thanks for your work.

It seems note annotation is not currently rendering when I visualize a sequence diagram.

Hi Team

Can we draw Time Event or Event Signal like below? with yuml, did not find anywhere in documentation

it seems that there is no way to set the appearnce style of the UML,such as the handwriting style called "scruffy"

After the last update of Visual Studio Code (1.26.1) the arrow heads has gone missing in our sequence diagrams.
[Robot]TaskCompleted>[PickProcess] now just show up as a straight line.

Hi, just a small improvement, I would like a feature that enables a name in-between an association in class diagram. For the below example, the text "ProvidedWith" is supposed to be placed in-between the given two cardinalities (1 and 0..*)

I am not sure if the current version supports partition for the activity diagram if it does. what is the syntax?
I mean something like this:

Thank you

I'm attempting to process the class diagram provided in the wiki's examples that has the following line:

[Order]*-*>[Product|EAN_Code|promo_price()]

What's happening is the Product class is rendered as "A5," which seems to be caused by the presence of a method inside the class:

I'm not sure if it is due to the version of node I'm running. Thoughts?

version: ^1.1.0

As mentioned in #4 and README.md, rows should be supported.

// {type:class}

[Foo|Bar]

• shows block with text "A0"

And rendered code from example:

Allow multi line definition.

Singleline
[Person|Firstname;Lastname|GetFullName()]

Multi line

[Person|
Firstname;
Lastname|
GetFullName()]

I have some rather large diagrams, but can't read them because the text ends up so small. It would be great to be able to zoom in/out, pan, etc.

Hi, Have added Sequence diagram Event Storming and CQRS modelling support ...

See bottom of README at https://github.com/anekol/yuml-diagram.git

If you're interested I can work up a PR ... Regards

Found an issue using the npm module where it won't parse {bg:colour} directives, since it can't find the rgb.txt file. This causes an exception to be thrown, but it's caught and all you see is an "Error parsing the yUML file" error as output in the svg.

In src/util/yuml2dot-utils, the following line

var rgb = fs.readFileSync(__dirname + "/../data/rgb.txt", {encoding:"utf8", flag:"r"}).split('\n');

should read:

var rgb = fs.readFileSync(__dirname + "/../../data/rgb.txt", {encoding:"utf8", flag:"r"}).split('\n');

since the data directory is two levels up from where yuml2dot-utils is located.