[HN Gopher] Show HN: Mermaid ASCII Diagrams
       ___________________________________________________________________
        
       Show HN: Mermaid ASCII Diagrams
        
       Author : AlexanderGrooff
       Score  : 133 points
       Date   : 2024-10-15 11:30 UTC (11 hours ago)
        
 (HTM) web link (mermaid-ascii.art)
 (TXT) w3m dump (mermaid-ascii.art)
        
       | ewalk153 wrote:
       | This would be great to build into project readme workflows.
        
         | kitd wrote:
         | You can already use Mermaid in GitHub markdown:
         | 
         | https://docs.github.com/en/get-started/writing-on-github/wor...
        
           | dmonitor wrote:
           | GitLab as well
           | 
           | https://handbook.gitlab.com/handbook/tools-and-
           | tips/#using-m...
        
           | mcraiha wrote:
           | Azure DevOps wiki also supports Mermaid
           | https://learn.microsoft.com/en-
           | us/azure/devops/project/wiki/...
        
           | edflsafoiewq wrote:
           | I don't like that it renders controls on top of the diagram.
        
       | quuxplusone wrote:
       | Some nits:
       | 
       | 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.
        
         | AlexanderGrooff wrote:
         | 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.
        
         | matt3210 wrote:
         | Same, I had no idea there were examples until I read this.
        
         | lordswork wrote:
         | Counter-nit: I found the examples within a few seconds.
        
       | octopusRex wrote:
       | I'm disappointed. I was actually expecting lovely ascii art
       | pictures of mermaids.
        
         | derfnugget wrote:
         | Same. This is more than a nit. It's pretty much a need.
        
           | kleiba wrote:
           | Here you go: https://www.asciiart.eu/mythology/mermaids
        
       | piedpiper99 wrote:
       | I supposed it's good for basic usage. I just tried a more complex
       | graph and it didn't render well.
        
       | nunobrito wrote:
       | 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 wrote:
         | Thanks for the kind words!
        
       | jonahx wrote:
       | 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.
        
       | virtualritz wrote:
       | This obviously needs a direct pipe into Svgbob!
       | 
       | https://ivanceras.github.io/svgbob-editor/
        
         | pkaye wrote:
         | Needs to have a '+' and the elbows and T intersections.
        
       | nlake906 wrote:
       | love it, will definitely be using it for sketching documentation
       | in comments for SQL sprocs, etc.
       | 
       | One request: support for self-reference, i.e. "A --> A", "A --> A
       | & B"
        
         | AlexanderGrooff wrote:
         | Thanks, that's a good suggestion. I'm also noticing that's not
         | working as intended.
        
           | AlexanderGrooff wrote:
           | Fixed in 0.5.0. Give it a try!
        
       | zczc wrote:
       | In the same vein: https://plantuml.com/ascii-art
        
       | tiagoafpereira wrote:
       | Also: https://dot-to-ascii.ggerganov.com/
        
       | abraxas wrote:
       | In the age of AI someone automated Mentifex[1]!
       | 
       | [1] https://nothingisreal.com/mentifex_faq.html
        
       | girvo wrote:
       | Hah we rely on Mermaid a _heap_ at work for building internal
       | dependency graphs from `yarn info` JSON data and a super lazy
       | depth-first graph haha. Super useful, nice to see another
       | renderer!
       | 
       | ts-directed-graph outputs Mermaid :)
       | 
       | This tool seems way more useful for hand-made ones, definitely
       | bookmarking
        
       ___________________________________________________________________
       (page generated 2024-10-15 23:00 UTC)