skanaar / nomnoml

The sassy UML diagram renderer
https://www.nomnoml.com
MIT License
2.7k stars 209 forks source link

width of node in npm version too wide #95

Closed byteshapechanger closed 5 years ago

byteshapechanger commented 5 years ago

The NPM version has nodes with large empty space after text. The github version (and therefore the web version) has correct node width.

I tried running nomnoml-cli.js from the github downloaded source, but it gives dependency errors ("Can't find module lodash...")

Is there a way I could fix the NPM version, or is there a way I could run nomnoml-cli.js from the github sources?

skanaar commented 5 years ago

nomnoml-cli.js requires that you run npm install first to get all dependencies. That is unfortunate, I should probably fix that.

About the empty space in SVG diagrams: Could you post a screenshot of how it looks? The SVG renderer uses a different text measurement algorithm than the canvas (web) version. There is a discussion about these things here: https://github.com/skanaar/nomnoml/issues/49.

The SVG nodes are laid out with more space for text to fit inside since we don't know which fonts are available on the rendering system.

byteshapechanger commented 5 years ago

Thanks for the response. I have attached 2 samples: one from npm, with the png converted from svg using ImageMagick convert. The other is from web. I'll try the suggestions in issue #49.

Thanks for making this app. I find it more flexible than mermaid, plantuml or graphviz. If anyone wants to include it in their orgmode workflow, modify ob-mermaid and replace call to mermaid with call to nomnoml-cli. This will link to the svg. To get png, modify the emacs lisp to call "convert".

npm

web

skanaar commented 5 years ago

That is an effect of the text measurement heuristic. This is the current implementation (edited for clarity). Yes, it is very naiive:

function characterWidth(c){
    if (c === 'M' || c === 'W') { return 14 }
    return c.charCodeAt(0) < 200 ? 9.5 : 16 // non-latin characters can be quite wide
}

This algorithms can be improved with specific weights for more characters than M and W.

It will always be an approximation of the actual text width since we don't know which fonts are available on the target system. And even if we know the font will be available we would have to load some rendering context to measure this correctly. In the browser that is available for free but not in the command line tool.

byteshapechanger commented 5 years ago

Sorry for the long delay in response. Thanks for posting the details about the issue. Thanks again for your hard work; your app is very helpful.