Show HN: GUI for Editing Mermaid Class Diagrams

1. mermaid

   1 156 76,912 9.9 TypeScript

   Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

   

   I think there are two slightly different issues here!

   1. SVGs generated by Mermaid use the SVG 2 features, but other than browsers, most libraries only support SVG 1.1 features, i.e. <https://github.com/mermaid-js/mermaid/issues/2102>, which is what the other comment mentioned.

   2. Mermaid requires a browser layout engine to render the diagrams (your issue), i.e. <https://github.com/mermaid-js/mermaid/issues/3650>. This is something I also really want to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project and we need to use Puppeteer/Headless Chrome to render mermaid diagrams, which isn't ideal.) However, I don't think this would be easy, since we'd need a browserless tool that supports a browser-like layout engine (although I'm hoping that [Servo][2] might eventually be able to support it).

   And if you do want to do headless renders of Mermaid diagrams, I'd recommend using (or adapting, since the code is all MIT licensed and I'm not aware of one that uses Selenium):

   - <https://github.com/mermaid-js/mermaid-cli>, which uses Puppeteer as the headless browser API.

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. d2-playground

   2 27 90 6.7 JavaScript

   An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

   

4. kroki

   3 53 3,119 8.9 JavaScript

   Creates diagrams from textual descriptions!

   

   KeenWrite parses the `diagram-` prefix then passes the word `graphviz` to Kroki (https://kroki.io/), which has an API for rendering a variety of ASCII diagrams, including Mermaid. Meaning, if Kroki adds a new diagram type, KeenWrite gets it for free (without modification).

   In Markdown, formatting a source code snippet entails using the standard syntax for code blocks:

       ``` graphviz

5. Servo

   4 168 29,745 10.0 Rust

   Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.

   

6. mermaid-cli

   5 10 2,814 9.0 JavaScript

   Command line tool for the Mermaid library

   

   I think there are two slightly different issues here!

   1. SVGs generated by Mermaid use the SVG 2 features, but other than browsers, most libraries only support SVG 1.1 features, i.e. <https://github.com/mermaid-js/mermaid/issues/2102>, which is what the other comment mentioned.

   2. Mermaid requires a browser layout engine to render the diagrams (your issue), i.e. <https://github.com/mermaid-js/mermaid/issues/3650>. This is something I also really want to fix (I maintain the [`mermaid-js/mermaid-cli`][1] project and we need to use Puppeteer/Headless Chrome to render mermaid diagrams, which isn't ideal.) However, I don't think this would be easy, since we'd need a browserless tool that supports a browser-like layout engine (although I'm hoping that [Servo][2] might eventually be able to support it).

   And if you do want to do headless renders of Mermaid diagrams, I'd recommend using (or adapting, since the code is all MIT licensed and I'm not aware of one that uses Selenium):

   - <https://github.com/mermaid-js/mermaid-cli>, which uses Puppeteer as the headless browser API.

7. mermaid-isomorphic

   6 1 26 7.3 TypeScript

   Transform mermaid diagrams in the browser or Node.js

   

   - <https://github.com/remcohaszing/mermaid-isomorphic>, which uses Playwright as the headless browser API.

   And make sure that whatever server is doing the headless renders of Mermaid diagrams has all the correct fonts installed!

   [1]: https://github.com/mermaid-js/mermaid-cli

Suggest a related project