Support Mermaid diagrams

[nilsreichardt]

Description

GitHub now supports Mermaids, like this:

  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;

Loading

You can more find about this in the official blog article: Include diagrams in your Markdown files with Mermaid.

Therefore, more and more people will use Mermaid diagrams in their REAMDE.md files. It would be nice if pub.dev could also render Mermaid diagrams like GitHub it can.

Currently, it's not possible as you can see here: https://pub.dev/packages/nils_pub_dev_playground

GitHub	pub.dev

[jonasfj]

Yes, this would be nice. It would also be great to have it in dartdoc.

I guess we'd have to resolve some security concerns.

[parlough]

\cc @timmaffett Who has been exploring Mermaid recently and created https://pub.dev/packages/mermaid.

Here's an example he prepared using this interop alongside package:markdown: https://timmaffett.github.io/markdown_mermaid/

[timmaffett]

I just submitted dart-lang/markdown#433 which takes what I think is a better approach to supporting text diagrams (such as mermaid), and that is the static conversion of the text diagrams to SVG when the documentation html files are generated. This seems more appropriate for dartdoc/pub.dev use than my earlier mermaid.dart package, which interops with mermaid.js on the client to create the diagrams with each viewing.
This eliminates the need for any client side js libraries, makes the document files 'static' as they are now, and makes things a little nicer for a security standpoint also.
There are more details in the PR, but an example can be found here: https://timmaffett.github.io/markdown_kroki/. (This does the asynchronous conversion to static SVG files as you modify the source, using a remote web service, so it is a not as fast as the mermaid.dart package).