Graphing support: add nomnoml #145

New Issue

claunia · 2026-01-29T14:28:38Z

claunia commented

2026-01-29 14:28:38 +00:00

Originally created by @PulsarFX on GitHub (Oct 12, 2017).

Would it be possible to add further graphing support to the existing mermaid extension?
Mermaid is really weak on class diagrams, so I started looking around and found http://www.nomnoml.com/ from https://github.com/skanaar/nomnoml
which has really nice syntax and produces nice diagrams.
Maybe something like

  ```nomnoml
  ```

To insert a nomnoml block?

Originally created by @PulsarFX on GitHub (Oct 12, 2017). Would it be possible to add further graphing support to the existing mermaid extension? Mermaid is really weak on class diagrams, so I started looking around and found http://www.nomnoml.com/ from https://github.com/skanaar/nomnoml which has really nice syntax and produces nice diagrams. Maybe something like ```nomnoml ``` To insert a nomnoml block?

claunia added the enhancement PR Welcome! labels 2026-01-29 14:28:38 +00:00

claunia closed this issue

2026-01-29 14:28:39 +00:00

claunia commented

2026-01-29 14:28:40 +00:00

@PulsarFX commented on GitHub (Oct 16, 2017):

to add a little more input:

nomnoml can draw to a canvas, or output the diagram in svg:
this is a minimal example showing both types:

<html>
    <head>
        <script src="zepto.min.js"></script>
        <script src="lodash.min.js"></script>
        <script src="dagre.min.js"></script>
        <script src="nomnoml.js"></script>
    </head>
    <body>
        <canvas id="target-canvas"></canvas>
        <div id="nomnomldiv"></div>
        <script>
            var canvas = document.getElementById('target-canvas');
            var source = '[nomnoml] is -> [awesome]';
            nomnoml.draw(canvas, source);
            
            var divid = document.getElementById('nomnomldiv');
            divid.innerHTML = nomnoml.renderSvg(source);
        </script>
    </body>
</html>

it would be enough to let markdig output a div just like it is done with mermaid:

        <div class="nomnoml">
            [class irtzr]->[class vbr] 
            [df458 ]->[nvjht877fg]
        </div>

this could be parsed afterwards like this:

        <script>
            function htmlDecode(input)
            {
              var doc = new DOMParser().parseFromString(input, "text/html");
              return doc.documentElement.textContent;
            }
            var graphs = document.getElementsByClassName('nomnoml');
            for (var i = 0; i < graphs.length; i++) {
                graphs[i].innerHTML = nomnoml.renderSvg(htmlDecode(graphs[i].innerHTML));
            }            
        </script>

@PulsarFX commented on GitHub (Oct 16, 2017): to add a little more input: nomnoml can draw to a canvas, or output the diagram in svg: this is a minimal example showing both types: ```html <html> <head> <script src="zepto.min.js"></script> <script src="lodash.min.js"></script> <script src="dagre.min.js"></script> <script src="nomnoml.js"></script> </head> <body> <canvas id="target-canvas"></canvas> <div id="nomnomldiv"></div> <script> var canvas = document.getElementById('target-canvas'); var source = '[nomnoml] is -> [awesome]'; nomnoml.draw(canvas, source); var divid = document.getElementById('nomnomldiv'); divid.innerHTML = nomnoml.renderSvg(source); </script> </body> </html> ``` it would be enough to let markdig output a div just like it is done with mermaid: ``` <div class="nomnoml"> [class irtzr]->[class vbr] [df458 ]->[nvjht877fg] </div> ``` this could be parsed afterwards like this: ``` <script> function htmlDecode(input) { var doc = new DOMParser().parseFromString(input, "text/html"); return doc.documentElement.textContent; } var graphs = document.getElementsByClassName('nomnoml'); for (var i = 0; i < graphs.length; i++) { graphs[i].innerHTML = nomnoml.renderSvg(htmlDecode(graphs[i].innerHTML)); } </script> ```

claunia commented

2026-01-29 14:28:40 +00:00

@xoofx commented on GitHub (Oct 16, 2017):

This is a one line add in markdig (see DiagramExtension.cs#L27), so PR welcome if you want this. 😉

@xoofx commented on GitHub (Oct 16, 2017): This is a one line add in markdig (see [DiagramExtension.cs#L27](https://github.com/lunet-io/markdig/blob/42472085a62dfb86e229f1cbb16e24aead6a9741/src/Markdig/Extensions/Diagrams/DiagramExtension.cs#L27)), so PR welcome if you want this. 😉

claunia commented

2026-01-29 14:28:40 +00:00

@PulsarFX commented on GitHub (Oct 17, 2017):

I can only provide patches. thanks to .net core 2 I am not able to compile or do anything :-/

nomnomlSupport.zip

@PulsarFX commented on GitHub (Oct 17, 2017): I can only provide patches. thanks to .net core 2 I am not able to compile or do anything :-/ [nomnomlSupport.zip](https://github.com/lunet-io/markdig/files/1390442/nomnomlSupport.zip)

claunia commented

2026-01-29 14:28:41 +00:00

@PulsarFX commented on GitHub (Oct 17, 2017):

finally managed to create a pull request: #149
only took me 6 hours 🤣

@PulsarFX commented on GitHub (Oct 17, 2017): finally managed to create a pull request: #149 only took me 6 hours :rofl:

claunia commented

2026-01-29 14:28:41 +00:00

@xoofx commented on GitHub (Oct 17, 2017):

Fixed by #149

@xoofx commented on GitHub (Oct 17, 2017): Fixed by #149

claunia referenced this issue

2026-01-29 14:47:45 +00:00