skanaar / nomnoml Goto Github PK
View Code? Open in Web Editor NEWThe sassy UML diagram renderer
Home Page: https://www.nomnoml.com
License: MIT License
The sassy UML diagram renderer
Home Page: https://www.nomnoml.com
License: MIT License
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?
Any chance you could push the latest version to npm please?
The one that is currently there is 0.0.4.
Cheers
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
[a]-[b]
[a]--[c]
[a]->[d]
by:
[a]-[b];--[c];->[d]
[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
Please visit http://www.nomnoml.com/codemirror/ and try the beta of the new editor. It has:
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!
try a longer than page UML source
This source gives rise to a rendering glitch
[foo]-[bar]
[foo]-[bar]
[foo]-[bar]
[foo]-[bar]
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]
That would be nice to have a proper link shape for this.
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
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?
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
it could be like:
[ name] // to display a stickman
[ use case] // for use case
and optionally:
[ ]<!-[ ] or [ ]-!>[ ] // for include
[ ][ ] // for extend
It probably would be a good idee to integrate this tool as a package for atom !
What do think about that ?
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?
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]
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.
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.
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).
StackEdit lets you synchronise with Google Drive (and other cloud storage services) - is this possible with nomnoml?
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.
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~
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
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.
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.
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 :
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
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
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 ๐
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. :)
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]';
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)
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]
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!
The renderer attempts to use setLineDash
- a feature not available unprefixed (or at all) on older browsers.
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.??
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.
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.
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
.
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
Your really should mention http://nomnoml.com, a web editor for nomnoml.
Very handy ๐
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!
Hi,
would it be possible to somehow map fields of different records? Like this: http://gojs.net/latest/samples/records.html
Thanks
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.