The "Example" buttons don't jump out at me; I found them but it took a while. Also consider labeling them with their point, e.g. "Example 3: Color"
If you change the input text to something well-formed, the graph seems to update immediately. But if you change it to something ill-formed, the graph doesn't update immediately — and then if you click "Generate" manually, it blanks the input box. Either this is a bug, or the "Generate" button doesn't do what I think it does (i.e. generate output). Again, adding a noun to the verb might help. Or just adding some usage information somewhere on the page.
For those like me who've never heard of "Mermaid," apparently it's like GraphViz's dot language but different. https://github.com/mermaid-js/mermaid
I tried the flowchart example from Mermaid's own README, but it didn't come out right: looks like the shape characters [] and {} aren't handled.
lordswork 4 hours ago [-]
Counter-nit: I found the examples within a few seconds.
matt3210 4 hours ago [-]
Same, I had no idea there were examples until I read this.
AlexanderGrooff 8 hours ago [-]
Thanks for the feedback! I agree that the web UI can be improved (quite) a bit, most of my efforts went into the actual generation of the diagrams. I'll have a look at prettifying it.
nunobrito 7 hours ago [-]
Hey, where are the mermaids?!?
But now seriously.. the diagrams are working really well for simple examples, thank you so much for sharing this tool. I have bookmarked your page, my documentation is based on text files and often have to build these kind of diagrams too.
The example buttons took me a while to be found, but are good for syntax explanation. Thank you for making this available.
AlexanderGrooff 6 hours ago [-]
Thanks for the kind words!
jonahx 7 hours ago [-]
Nice work, I love ascii diagrams. Especially useful when you want a visual explanation that can be embedded directly in source code.
Small nit on layout: 90 degree joints should use "+" in the connecting lines, as they do in the boxes.
https://ivanceras.github.io/svgbob-editor/
The "Example" buttons don't jump out at me; I found them but it took a while. Also consider labeling them with their point, e.g. "Example 3: Color"
If you change the input text to something well-formed, the graph seems to update immediately. But if you change it to something ill-formed, the graph doesn't update immediately — and then if you click "Generate" manually, it blanks the input box. Either this is a bug, or the "Generate" button doesn't do what I think it does (i.e. generate output). Again, adding a noun to the verb might help. Or just adding some usage information somewhere on the page.
For those like me who've never heard of "Mermaid," apparently it's like GraphViz's dot language but different. https://github.com/mermaid-js/mermaid I tried the flowchart example from Mermaid's own README, but it didn't come out right: looks like the shape characters [] and {} aren't handled.
But now seriously.. the diagrams are working really well for simple examples, thank you so much for sharing this tool. I have bookmarked your page, my documentation is based on text files and often have to build these kind of diagrams too.
The example buttons took me a while to be found, but are good for syntax explanation. Thank you for making this available.
Small nit on layout: 90 degree joints should use "+" in the connecting lines, as they do in the boxes.
[1] https://nothingisreal.com/mentifex_faq.html
One request: support for self-reference, i.e. "A --> A", "A --> A & B"
https://docs.github.com/en/get-started/writing-on-github/wor...
https://handbook.gitlab.com/handbook/tools-and-tips/#using-m...