demo.pdf

Graph Visualization

Two graph visualization grammer are supported, mermaid and graphviz.
To enable these features, options Mermaid and/or Graphviz in MacDown -> Perferences... -> Rendering should be checked.

Mermaid

Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

mermaid has 3 diagram syntax.

Flow Chart

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

Sequence Diagram

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Gantt

gantt
title A Gantt Diagram

section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
anther task      : 24d

Graphviz

Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in networking, bioinformatics, software engineering, database and web design, machine learning, and in visual interfaces for other technical domains.

Please refer to Graphviz website for details.

Supported rendering engines,

• circo
• dot
• fdp
• neato
• osage
• twopi

Here are some samples.

Hashmap

digraph G {
nodesep=.05;
rankdir=LR;

node [shape=record,width=.1,height=.1];
node0 [label = "<f0> |<f1> |<f2> |<f3> |<f4> |<f5> |<f6> | ", height=2.5];
node [width = 1.5];

node1 [label = "{<n> n14 | 719 |<p> }"];
node2 [label = "{<n> a1 | 805 |<p> }"];
node3 [label = "{<n> i9 | 718 |<p> }"];
node4 [label = "{<n> e5 | 989 |<p> }"];
node5 [label = "{<n> t20 | 959 |<p> }"] ;
node6 [label = "{<n> o15 | 794 |<p> }"] ;
node7 [label = "{<n> s19 | 659 |<p> }"] ;

node0:f0 -> node1:n;
node0:f1 -> node2:n;
node0:f2 -> node3:n;
node0:f5 -> node4:n;
node0:f6 -> node5:n;
node2:p -> node6:n;
node4:p -> node7:n;
}

Process diagram with clusters

digraph G {
subgraph cluster0 {
node [style=filled,color=white];
style=filled;
color=lightgrey;
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond];
end [shape=Msquare];
}

Above are output pdf and source markdown.

Screenshot

Screenshot 2

Is it a good idea to overload the code block syntax? What happens if the user really wants to syntax highlight Mermaid and Graphviz source code?

Could these be provided as plugins? Could I possibly write one myself? I'd personally like to be able to use Markdeep's ASCII art diagrams, and pasting the script tag in directly doesn't work (not to mention pulls in the rest of Markdeep, which I don't want).

You could use a mermaidrender as code block syntax name so you can style highlight with mermaid and render it with mermaidrender.
haroopad is using the same syntax as this PR for now

@loopingz Good suggestion, but I prefer mermaid-renderer or mermaid-rendered as syntax name.

Sure it is cleaner you are right :)

I've taken the time to resolve the issue with conflicting files and also corrected another trouble area. Happy to provide updated patch if interested..

Please do @jeremykittel :)

(Probably easiest if the maintainers merge this PR into a work-in-progress feature branch where you can apply your fixes to, then review the branch in total.)

I would love this feature. Let me know if I can help.

@ThadeuLuz Try to come up with a better syntax for the Mermaid and Graphviz block. I really dislike the current syntax, even the -renderer variant feels wrong to me. Code block should just be code blocks, not anything else.

@uranusjr I guess @tinglou did this because other platform not supporting mermaid will fallback to code block, which is at least readable.

@uranusjr that means you won't ever consider merging it, and we should fork it ?

@loopingz Honestly I’m still swinging on this issue. Ideally this should be done as a plug-in, but that requires some structural change in the parser. Ideally I should work on the parser, but life means I don’t really have the time in the foreseeable future.

Ah hack, let’s just merge this. Resolve the conflicts, I’ll merge and do a pre-release before by the end of the month.

I can always refactor this if I ever decide to develop MacDown 2.0 someday.

p.s. Add yourself in the Credits.rtf file while you’re on this.

Oh, and there should probably be some license files because we’ll vendor Mermaid and Graphviz right? Mermaid is MIT licensed so there should be a copy of its license inside the LICENSE directory. Graphviz is, hmm, Eclipse Public License? Anyone familiar with that can tell me what should we do to incorporate code licensed under it?

According to this article it should be enough to include their license text. The Graphviz code is included without modification (right?) so we fall into the “redistribute a program with an EPL component” category. But I need some first-hand sources to back this.

Hi,
As i think Tiglou is not really active anymore i did the rebase of his PR and solve conflict aswell as adding the LICENSE and Credits.
The Graphviz code is not modified so included the license is good enough i think

The new PR is there : #865

awesome

@tinglou

Two graph visualization grammer are supported, mermaid and graphviz.
To enable these features, options Mermaid and/or Graphviz in MacDown -> Perferences... -> Rendering should be checked.

I don't see these two render options. How do I enable them?

@Norfeldt It’s currently only available for testing release.

https://macdown.uranusjr.com/history/testing/

@FranklinYu thank you very much. I can confirm that it is possible to render mermaid and graphviz.

But the mermaid renders twice..

It's not so good now.
I'm using the Version 0.7.1, when I need the mermaid function, I discover this.However, there is no selection like 'mermaid' in Macdown after searching again and again.
Then I use the Version 0.7.2d137, this version show the checkbox right after 'show line num', it's good but not working, it shows the origin code.T_T It's a hard try.
I actually don't want to use Typora, so I hope this can be fixed and published.
Thanks!

@yixikkjkj Try 0.7.2d137