Hi,
Is it possible to put a label on relationships? for example, there are <<include>> and <<extend>> available in use case diagrams, for dependency relationship.
Stereotypes explained here.

Thanks for great your library. :)

The renderer attempts to use setLineDash - a feature not available unprefixed (or at all) on older browsers.

Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?

Thanks for your great work!!
Piicksarn

I want to make arrows across package, for example:

[<package> A|
    [Cat] -> [B.Dog]
]
[<package> B|
    [Dog]
]

Is there any way to do this?

Great project BTW!

https://github.com/doctorrustynelson/vscode-nomnoml

Hi!
In the language reference you talk about directives, but I can't figure out how to use them and there is no example. How do I put them in my code?

Thanks for a very practical tool!

There is no way (that I know of) to escape special characters, it's not possible for instance to do something like [MyClass|ArrayOfNumbers:int[]]

Anyway great project! Keep going! 👍

Hi, and thanks again for this amazing tool

I've discovered a specific syntax to describe rdf files, it's called Turtle.

In turtle, there is three element who can be implemented in nomnoml to avoid redundancy

1. Dot .
   Actually this is the same function as semicolon ; and backspace.
   It allow to write multiple different element on a single line.
2. Semicolon ;
   In turtle, semicolon means "this is a new element with the same subject than before".
   In nomnoml it can replace sentences like:

[a]-[b]
[a]--[c]
[a]->[d]

by:

[a]-[b];--[c];->[d]

1. Comma ,
   In turtle, comma means "this is a new element with the same subject and the same predicate (link) than before"
   In nomnoml it can replace sentences like:

[foo]-[bar]
[foo]-[baz]
[foo]-[fighter]
[foo]-[bang]

by:

[foo]-[bar],[baz],[fighter],[bang]

It lacks one element, if i want to link the last object with a new one:
in that case:

[a]-[b]
[b]-[c]
[c]-[d]

It can looks like:

[a]-[b]-[c]-[d]

I have only one question,
Is it parsable?

Regards,
Buridan

Hello

The tool as it is is really nice!

I'm using it to draw the internal of grails projets. I'm interested in showing the different layers, something like this :

http://www.nomnoml.com/#view/[Controler2]%20-%3E%20[HighLevelService1]%0A[Controler2]%20-%3E%20[HighLevelService2]%0A%0A%0A[Controler1]%20-%3E%20[HighLevelService2]%0A[Controler1]%20-%3E%20[HighLevelService3]%0A%0A[HighLevelService2]%20-%3E%20[DelegateService1]%0A[HighLevelService2]%20-%3E%20[DelegateService2]%0A[DelegateService1]%20-%3E%20[DelegateService2]%0A%0A[HighLevelService3]%20-%3E%20[DelegateService2]%0A%0A[HighLevelService3]%20-%3E%20[SubService1]%0A[HighLevelService2]%20-%3E%20[SubService1]%0A%0A[SubService1]--%3E[External%20WS]%0A

As you can see the layers would be controllers, high level services, delegate services, and subservices. Is there any way to group layers, for example by placing a dotted rectangle around them, with a label ?

Not a solution: use the syntaxe [vehicles|[Car]] . This is not possible because I want to be able to draw relations between items across packages (for example a specific controler to a specific high level service)

Cheers

Hi,

Thank you for this awesome program, i use it everytime i can.

I wonder if nomnoml couldn't be Modelized with itself?

This is not to challenge you (just a bit ;), but i wonder if that wouldn't make the codebase more maintainable, new features better expressed and Nomnoml more comprehensive?

Best Regards,
Buridan

Hi,

would it be possible to somehow map fields of different records? Like this: http://gojs.net/latest/samples/records.html

Thanks

Nomnoml looks like a very promising replacement for Blockdiag for many use cases, but the rendering of SVG appears faulty. A simple example:

#arrowSize: 0.5
#bendSize: 0.3
#direction: down
#gutter: 5
#edgeMargin: 0
#edges: hard
#fill: #fff; #ccc
#fillArrows: false
#fontSize: 16
#leading: 1.25
#lineWidth: 2
#padding: 10
#spacing: 40
#stroke: #33322E
#zoom: 1

[ABCDE]->[BCDEF]
[BCDEF]->[CDEFG]
[BCDEF]->[DEFGH]

It renders as the figure on the left with standalone.svg.usecase.html and as on the right with standalone.usecase.html:

The issue seemingly is with #fontSize: 16.

When writing explanations in notes:

[<note>...]

it would be useful to be able to use the control characters [ and ] too.

Would it be possible to introduce escaping by backslash, for example? Source like this:

[<note>An array \[1, 2\] example]

would render the following text:

An array [1, 2] example

This source gives rise to a rendering glitch

[foo]-[bar]
[foo]-[bar]
[foo]-[bar]
[foo]-[bar]

Exists in latest master. Picture shows the issue:

As you know, I have created some time ago an SVG renderer for nomnoml: https://github.com/ctzurcanu/nomnoml/blob/master/lib/skanaar.svg.js
It has zoom and pan that solves the large diagram issues.
Should I take some time to make it compatible with the newest revision and then pull request?
Anyone else interested in this?

HEAD revision (only deployed to http://www.nomnoml.com/releasecandidate/) is initally too zoomed in on Retina displays.

When zooming in it fails to adjust resolution accordingly and text appears pixelated and blurry.

hi,
All is in the title. That would be nice to descibe some optionnal groups.
No need, to rebuild some specific behavior, that's just a frame with dashed border.

thx & respect for what you've done

The ability to create and link more than two classifier on a single line may be usefull two avoid repetitions.
example:
[Alice]<-[Bob]
[Bob]<-[Carol]
[Carol]<-[Dave]
could became:
[Alice]<-[Bob]<-[Carol]<-[Dave]

If I use Chinese character, the SVG ouput looks like this:

Hi, thank you for this work.

How should I pass directives in the standalone library?

This worked but I don't think is the right way.
var source = '#fill: green \n #direction: right \n [nomnoml]is->[awesome]';

StackEdit lets you synchronise with Google Drive (and other cloud storage services) - is this possible with nomnoml?

Is there a way to write something like

[Animal]<:-[Cat],[Dog],[Pig]

instead of

[Animal]<:-[Cat]
[Animal]<:-[Dog]
[Animal]<:-[Pig]

It would be a very practical feature.

Hi Skanaar,

thank you for starting this great project. I really like using it.
While using nomnoml in the team, one function lead to some confusion. It is related to the 'save' button functionality on a shareable link diagram (the one at the top middle).

The one interpretation is, that no changes are saved to local storage after clicking on ok.
And the other, in my team, more common interpretation, was that changes 'by default' are not saved automatically to local storage, but will be saved when clicking on the save button.
Part of the confusion is probably related to the confirm message dialog, which reads as
"Do you want to overwrite the diagram in localStorage with the currently viewed diagram?".
So, most of us thought that by clicking save the modified document would then be saved to local storage. Instead, the local storage was set to the content of the shareable link.

I just wanted to give you some feedback, from what we experienced by using nomnoml.

In my fork, I modified the save button to save the edited content to local storage. But if you want to keep functionality as is, perhaps you can modify the confirm message and make clear, that possible changes will be lost.

Thanks

Please visit http://www.nomnoml.com/codemirror/ and try the beta of the new editor. It has:

• limited syntax highlighting (but a minimum to keep everything cool and crisp)
• tab-indent multiple selected lines
• Sublime Text-based keyboard shortcuts such as Copy Line, Move up/down, Ctrl-jump whole words

First of all, thank you for this awesome tool! I just found it but immediately fell in love with it.

I think it would be beneficial to create a better sample / welcome text. This tool is really powerful and highly customizable, but the current sample is a bit plain. It does not show the advanced classifier types, nor the custom styling capabilities. Creating a more eye-catching sample would definitely gain more users (for when people judge by a split second look at the sample. They usually think the sample contains everything the tool is capable of.)

What do you think? This would be a very easy to do but beneficial change to make (in the long run).

I just got back from nodeconf, and there was a great talk on real time collaboration algorithms.

I'm pretty sure the one that would work best here is the Operational Transform.

I just discovered your tool, awesome work ! It helps me a lot 👍
Something that is missing to me, that's just a very little point, but when I write

[Class||
  <abstract> + myMethod()
]

I'm actually expecting that the method is going to be written in italic, but that's not the case. In fact, the parser just does not take in account the type of the method. The same would be great for class methods and class attributes, but I don't know if a <class> classifier would be theright thing to do.

I'll be glad to help, but actually I'm a bit lost in those files, I'll probably take a deeper look at the code, so I can contribute to the project 😃

Thanks for the awesome work! This tool is by far the best!

I don't know how to formulate this issue properly, but let's try.

I feel that it would be extremely beneficial to be able to have the diagram code organized in multiple files and being able to include (or import) them, e.g. #include "some_class.noml"

I understand this is a long reaching issue, I guess it depends on #29 or #26

What do you think of it? To me that is the only thing that really would make creating big diagrams much easier.

It probably would be a good idee to integrate this tool as a package for atom !
What do think about that ?

Hi! Firstly, thank you for a really great project, it is already proving to be a lot more useful to me than many mature graphing packages out there. I really like the simple syntax that reminds me of markdown and gives the possibility to check differences from version to version. Keep up the good work!

A question about UML messaging charts - I saw from sequence.nomnoml something that reminds me of UML message flows, is this a work in progress and is that something I can expect to be added to nomnoml? :) It would be really great if message create/destroy async/sync flows could be beautifully mapped.

Don't stop here! 👍

I wanted to have that diagram

[Properties]+->[Property]
[Properties]+->[Properties]

But it turned out to be ugly.

That would be nice to have a proper link shape for this.

http://www.nomnoml.com/#view/%0A%0A[Properties]%2B-%3E[Property]%0A[Properties]%2B-%3E[Properties]%0A

It would be handy if nomnoml could come in a standalone javascript version for embedding on pages where you would want to render nomnoml diagrams.

For example something like this:

<script src="nomnoml.js"></script>
<script id="noml" type="text/plain">
    [nomnoml]is->[awesome]
</script>
<canvas id="target-canvas"></canvas>
<script>
    var canvas = document.getElementById('target-canvas');
    var noml = document.getElementById('noml').innerHTML;
    nomnoml.draw(canvas, noml);
</script>

On a sidenote, I've started this work and have a working build of a standalone nomnoml.js already.

Your really should mention http://nomnoml.com, a web editor for nomnoml.
Very handy 😄

For large diagrams, top/bottom left/right get's cut off.

If you add these two CSS styles, it should do the trick:

#wrap {
     overflow: auto;
}

#canvas {
    top: 0;
}

Alternatively, you could make the #canvas element draggable and resizable using jQuery (or any other preferred method) for better visibility and control over the output of the diagram.

Otherwise, great job on the tool!

try a longer than page UML source

uml-diagrams has an example diagram.

As far as I can tell, there does not appear to be a way of relating classes between frames/packages/etc in this way?

Following the instructions in CONTRIBUTING.md, I cloned master, ran npm install, and began loading HTML files in "Chromium 58.0.3029.81 (Developer Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)." The exact revision of nomnoml I tested is 9955b94.

When loading one of the HTML files described in CONTRIBUTING.md called test/requirejs.usecase.html I got the following error:

Uncaught TypeError: Cannot read property 'Digraph' of undefined
    at layoutCompartment (nomnoml.js:1282)
    at Kn (lodash.min.js:9)
    at Function.<anonymous> (lodash.min.js:29)
    at layoutClassifier (nomnoml.js:1321)
    at Kn (lodash.min.js:9)
    at Function.<anonymous> (lodash.min.js:29)
    at layoutCompartment (nomnoml.js:1280)
    at Object.nomnoml.layout (nomnoml.js:1328)
    at parseAndRender (nomnoml.js:1580)
    at Object.nomnoml.draw (nomnoml.js:1588)

Any chance you could push the latest version to npm please?

The one that is currently there is 0.0.4.

Cheers

Thanks a lot for publishing this project! I believe that it has more potential than powering the web page editor.

I'd like to use nomnoml for generating diagrams in developer documentation. Instead of checking in binary images together with nomnoml sources, just the nomnoml sources would be maintained and the images would be generated when the documentation output is generated. It would mean calling nomnoml from a command-line tool.

When not running in the browser, the tool would have to either start the browser in the background and communicate with it, or integrate a headless browser like PhantomJS, or use an alternative canvas implementation like node-canvas. The former two possibilities would be tricky to make for a quickly executable tool. The latter would need a reliable canvas implementation. Let's have a look at the latter:

// Writes a simple PNG diagram to the standard output
var Canvas = require('canvas'),
    nomnoml = require('nomnoml'),
    canvas = new Canvas(640, 480);
nomnoml.draw(canvas, '[nomnoml]is->[awesome]');
canvas.pngStream().pipe(process.stdout);

Luckily, nomnoml does not use other browser features than the canvas. What prevents nomnoml from being used like this?

• Access to the global window object
• Embedding the dagre module. which works only in the browser

I tried to make the necessary changes in my fork. Would you be interested in making nomnoml usable from NodeJS?

[className_1] cool -:> [className_2]
[className_1] no -:> [className_1]
[className_2] sort of -:> [className_2]

I find myself opening multiple browsers (= different localstorage) to work on multiple different, but related, nomnoml's. It would be great if I could open multiple nomnoml tabs and edit them in parallell, in the same browser.

Hi,

First of all, thanks for an awesome tool.

I noticed, that (sadly) when using the #fill directive, one can only color the whole diagram in the same color.

It would be great, if I could switch up those directives, to color code parts of the diagram. Maybe by putting them inside the declared object (like yuml does) or by simply being able to switch them out.

So:

#fill:red
[A]
[B]

#fill:blue
[C]

[A]->[C]

Would create a diagram, where 'A' and 'B' are filled red, but 'C' is filled blue.

Thanks.

Create a new classifier type to model the three-way arrows of Association Classes.

i want to learn this awesom tool..is it build in react..if its not .then in which laibrary,framework is it build.??

it could be like:
[ name] // to display a stickman
[ use case] // for use case
and optionally:
[ ]<!-[ ] or [ ]-!>[ ] // for include
[ ][ ] // for extend

HEAD revision (only deployed to http://www.nomnoml.com/releasecandidate/) is initally too zoomed in on Retina displays.

When zooming in it fails to adjust resolution accordingly and text appears pixelated and blurry.

Would it be possible to get a node command line interface for rendering nomnoml files?

It would be great to be able to:

npm install nomnoml
nomnoml myDiagram.nomnoml -o docs/myDiagram.png

...or similar.

My use case is that I'd like to be able to keep plain-text versions of diagrams under version control, and render these to image files as part of an npm build process to generate documentation. I'd love to use nomnoml for this purpose, as the rendering and syntax are quite nice compared to the few alternatives I've seen.