Mermaid diagram render support

[DubininDmitry]

It would be nice if you do the Mermaid diagram support.

Now only the display of the code works, but I would like the rendering itself (Obsidian has this support):

mermaid - Markdownish syntax for generating flowcharts, sequence diagrams,...

[santi]

This is a great idea! Would love this functionality

[junyu]

The mermaid diagram looks cool! Since the plugin system is under heavy development, I think this might be a good idea for a testing plugin.

What do you think? @Charlie

[NickB]

https://diagrams.net would be great too!

[AlphaTroya]

Mermaid is gaining popularity, even GitHub have it’s support in the roadmap

[melvyn]

Mermaid doesn’t do a lot of diagram formats. Unlike plantuml/planttext it doesn’t allow graph viz diagrams. Joplin has a PlantUML plugin and I can use this:

bgcolor="purple:pink" label="Scrum App" fontcolor="white"
  subgraph cluster1 {fillcolor="blue:cyan" label="Press" fontcolor="white" style="filled" gradientangle="270"
		node [group=g1 packmode=array_c3 shape=box fillcolor="red:yellow" style="filled" width="80%" gradientangle=90]
		Undone;
		node [group=g2 packmode=array_c3 shape=box fillcolor="red:yellow" style="filled" gradientangle=90]
		"Done Done";
		node [group=g3 packmode=array_c3 shape=box fillcolor="red:yellow" style="filled" gradientangle=90]
		Done;
	}
edge [style=invis];
  Done -> "Done Done"
  "Done Done" -> Undone
}

At least diagrams.net does free format diagrams.

[Aryan]

The incredible @hkgnp has made a plugin adding mermaid support to Logseq. It’s on the marketplace and you can check it out here as well:

GitHub - hkgnp/logseq-mermaid-plugin

[kennethaar]

I am trying to use the plugin but if I fork a path, it won’t render. It just says:
There is an error with your mermaid syntax. Please rectify and render again.

[hkgnp]

Can you share your mermaid syntax here?

[kennethaar]

graph TD
A(Coffee machine
not working) → B{Machine has power?}
B -->|No| H(Plug in and turn on)
B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
D -->|No| F(Send for repair)

[hkgnp]

Your syntax looks like may have some typos. Please see here:

flowchart TD
A(Coffee machine not working) --> B{Machine has power?}
B -->|No| H(Plug in and turn on)
B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
D -->|No| F(Send for repair)

[ngp]

Does mermaid.ink upload/store our diagrams on someone’s servers? I’m hesitant to use this for work because of potential data leakage.

[Carey_Black]

I could easily be misreading/skimming the source code.

However it looks to me like the code use the Koa javascript library to do the work of a “web server”. I don’t see any place where the information is sent “off host”.

But you could install the plugin. then unplug from the network and try it out. If it fails… then check your network logs to see what went wrong. Just a thought.

[hkgnp]

mermaid.ink can be installed locally on your computer and just run as a local server. Just follow the instructions here.

For more detailed instructions on using it with the logseq-mermaid-plugin, you can find it here.

[ared113]

Could render it like obsidian as a local element, not just a picture?
(want use Wikilink in mermaid like it,)

• Such a mermaid is much more useful than an existing graphic view (if the mermaid can be automatically hung under the page like Backlink, the page relationship will be more convenient), there can be a local mermaid graph (each code block you write), and the overall graph (if necessary, based on the logical integration of the big picture,),
• This idea is like the mermaid x breadcrumbs x backlink to improve the existing Backlink, because the existing BackLink is more like a label and cannot explain the relationship between pages.
  
  

[Carey_Black]

While I like the creativity of the plugin… I really wish this feature could be “tightly packaged” into logseq. ( without the need to run a local “web server”. )

Meaning is there anyway this functionality could be incorporated into the base with maybe just a JavaScript render? Instead of a full local NodJS web server install running on a local port?

Is there a path to get a plugin “pulled in” to the core project?

[Aryan]

Try the new fenced code plus plugin which allows you to render mermaid locally

[scotto]

Hi @Aryan, thanks for the tip, but I can’t find any documentation on how to use fenced code plus. Could you give an example?

[tienson]

You can install the fenced code plus plugin in the marketplace.

[Aryan]

Just create a regular markdown code block. Set the language to mermaid. That’s it