JavaScript requirement for Markdown? Page views boost through terminal-unreadable documentation? Yeah... no.
I prefer ASCII drawing characters/boxes, similar to mentioned in this[1] and following comments.
Include diagrams in your Markdown files with Mermaid
201–210 of 272 posts
Re: Include diagrams in your Markdown files with Mermaid
#202Re: Include diagrams in your Markdown files with Mermaid
#203Earlier quoted context omitted.
> ASCII charts are very hard to format; you'll really need tools or editor plugins for that. Even with tools and plugins, creating tables in Markdown (in any flavor) is painful enough that I just don't even try. No one really expects to edit an image with a text editor but tables are tantalizing close. I'd sooner have ASCII inspired tables that are easier to edit than images and diagrams.
I do tables, but I will admit to having them auto-formatted on save. That is, I type a pipe separated list manually, and auto-space it on save.
IIRC vscode does this by default, definitely a really handy feature
Re: Include diagrams in your Markdown files with Mermaid
#204Yay! I can design systems without draw.io, OmniGraffle, Visio, or Lucidchart! Very excited about this.
Re: Include diagrams in your Markdown files with Mermaid
#205I’m super excited for this! One thought though, on the syntax. Wouldn’t it be a bit odd if suddenly this line in a README.md: ```js const foo = 1 + 1 ``` Rendered as: `2` ? Isn’t that kind of what we’re doing here with the mermaid source tag? That tag is for showing source code, no? Feels like there should be another tag for rendering it.
Yes, it sucks. This is why we can't have nice things. Because a million different programmers always choose some random incompatible interpretation and then we're all stuck with it. Another similar example, all of VSCode's configuration files are called filename.json but they aren't actually json (any spec compliant json parser would barf on them). They could just have easily named them filename.jsonc (or whatever th…
If I could have one wish, I'd replace file extensions with a hash of the spec and have someone maintain a lookup table from spec hash -> extension for rendering
Re: Include diagrams in your Markdown files with Mermaid
#206Looks very single-use and way too verbose. There should be a replacement of SVG that is not XML based and easy to use
Re: Include diagrams in your Markdown files with Mermaid
#207The rendered sample looks notably blurrier than the surrounding text. Is it rendering to SVG? If not, why not?
Re: Include diagrams in your Markdown files with Mermaid
#208I started using this when I saw the initial announcement that they were working on integration.
I've got all of my diagrams ripped out of lucidapp and into project repos, but the issue I'm having is that IntelliJ is still shipping a year+ outdated version of mermaid, which makes ordering nodes impossible in some cases.
Re: Include diagrams in your Markdown files with Mermaid
#209Earlier quoted context omitted.
The "spirit of markdown" has long been abandoned by GitHub, more often than not the offline readability of a README is absolutely ignored in exchange for a safe-HTML subset to create kind-of websites below the directory listing of a repository. It should really be called RENDERME.
To be fair, I'm not sure "offline readability" is an actual problem anymore. VS Code and (presumably) other IDEs offer a very simple live-preview window for viewing and editing markdown files.
Not everyone uses vscode
Re: Include diagrams in your Markdown files with Mermaid
#210Earlier quoted context omitted.
The idea of the bang syntax came up. https://talk.commonmark.org/t/mermaid-generation-of-diagrams... But in the end went with simple. There will be a very limited subset that will render this way - executing raw code without the users permission in the browser just opens up too much attack surface area that we’d need a very compelling use case to do the security work necessary to make it protected (even if that was p…
Alright, but how do I embed highlighted Mermaid source code in Markdown now?
embed the HTML:
your mermaid code with highlighted sections
Use a tool like pygments to generate the highlighted HTML (assuming there even is highlighting for mermaid syntax).
What you're asking for is an uncommon edgecase that's not what people want in 99% of circumstances (instead they want the rendered chart). Markdown still gives you the HTML escape hatch so use it. Sure it's not pretty but it's no worse than if github didn't support highlighting mermaid source anyways.
If you don't want highlighting just put a fenced code block without the mermaid info string. It will render as unhighlighted code. IMHO that's what you'd want as a workaround to demo source like in a mermaid readme.