More Diagramming in Markdown support

[davidmoshal]

Would be great to have more diagramming tools e.g:

1) Dataflows:

• dataflow - unfortunately in Haskell, but maybe there is a way to integrate with it, or possibly there something similar in JS, perhaps this one:
• flowchart.js
• (I realize Mermaid can do some of this)

2) UI mockups (Wireframes):

• Plantuml salt (wireframes seems a bit dated)

• Markdown-UI

• other ideas

• would it make sense to embed html like this?

  • wired.js
  • Wireframe-CSS

• wondering if it would be useful to integrate with something like balsamiq ?

3) Network and other diagrams:

• vis.js
• viz.js
• cytoscape

[davidmoshal]

Found a large list of online services. Perhaps some could linked to from markdown:

https://github.com/oscarb/prototyping-tools

[davidmoshal]

Am wondering if docz concepts could be useful, or perhaps just the MDX

[egoist]

@davidmoshal mdx is just markdown with jsx support, why do you need that?

[davidmoshal]

@egoist I apologize for my vague feature request.

I'm using Docute to document a project, and it's really great, but I'm looking for a flexible way to include a variety of diagrams in markdown, eg:

• class diagrams
• site layout diagrams
• flowcharts
• wireframes

My previous comments captured some potential candidates, which probably can be classified into:

a) diagram markup languages (dot, plantuml, salt, mermaid). b) embedded html-based components (actual html, Vue, mdx). c) calling out to a third party service (gravizo, lucidchart, various wireframing sites).

So far some have worked better than others, but none ideal. I'll do more research on this.

[davidmoshal]

More info on Diagramming in Markdown:

1) Looks like someone else has been exploring this recently too, compiled a nice list:

• https://gist.github.com/rodneyrehm/40e7946c0cff68a31cea

2) How Typora markdown editor supports diagrams: Draw Diagrams With Markdown

3) PlantUML:

• Markdown native diagrams with PlantUML

• StackOverflow discussion about how to integrate Github markdown with Plantuml, with an example.

• Discussion on Gitlab showing how to set up your own Plantuml server

• Ditaa with PlantUML

• other Ditaa:

  • Ditaa
  • editor https://monodraw.helftone.com/
  • https://github.com/christiangoltz/shaape

4) Markdown Plus diagrams.

5) Online diagram editors:

• Integrating Draw.io with Github https://github.com/jgraph/drawio-github
• https://yuml.me/
• LucidChart