seao/grav-plugin-diagrams

Diagrams is a Grav plugin that adds simple and powerful diagrams functionality

👋 Hi there! I'm Aurélien Wolz

Website • Linkedin • Malt

I'm a freelance full-stack web developer passionate about building innovative solutions to enhance the web experience for everyone. I enjoy coding open-source projects on my free time, which mainly revolves around my hobbies: share my love for crafts beers 🍺 discuss sustainable gardening 🌱 improve daily comfort with home automation 🏠

Technical skills ✨

• Design : UX/UI
• Backend : Node.js, Python
• Frontend : Svelte, Vue/VueX
• CI/CD : Docker, Github Actions, GitlabCI
• Database : MongoDB, MySQL, PostgreSQL, Firebase
• Tooling: Vite, Rollup, Esbuild, PNPM, Monorepo

Contact

Want to discuss your next project that I can help you with?
Contact me on Malt or at [email protected]

grav-plugin-diagrams's Issues

lines not rendered due to stroke-width set to 0

I'm using v1.0.1 and found the example sequence diagram doesn't render lines and arrows correctly.
It seems applied CSS is below, around line 130 in css/mermaid.css.

.grid path {
  stroke-width: 0;
}

When I set stroke-width to 1, it did render. Is it a bug?

Not working after update from 1.0.1 to 1.0.3

Hi,

Updated from 1.0.1 to 1.0.3 and the diagrams are no longer working

Grav version: 1.3.10

working link syntax

Working with Grav 1.5.1 and latest plugin source installed from Github.

I'm not able to provide a working link syntax. Following example provides a diagram but link target is wrong:

[mermaid]
graph TD

st{<a href=''http://google.com''>Google test}

[/mermaid]

Is inserting a link somehow limited?

Diagram not displaying

I installed via the admin plugin, wrote this out;

[flow]
st=>start: start
e=>end: finished
op1=>operation: login to auth|success
sub1=>subroutine: register Your e-mail|success
cond=>condition: email registered?|invalid
io=>inputoutput: continue to dashboard|calm
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
[/flow]

And it just displays it as text... am I missing somthing?

mermaid integration

Thanks for this useful plugin. Would it be possible to integrate mermaid to this plugin?

With my limited understanding of code, I wonder if it is as simple as adding the mermaid.js into the js directory and then including the line $this->grav['assets']->addJs('plugin://diagrams/js/mermaid.js'); in diagrams.php at line 132?

Quark-Theme Interference

When creating a diagram on a page which uses the Quark Theme, it causes a grey overlay on the entire page.

Mermaid as code

Would it be possible to also render mermaid syntax that is in a code-block, ```mermaid as an alternative to [mermaid] tags?

Eg.

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
```

Thanks.

add graphviz js in this plugin

hi, can u add graphviz in this plugin, it will powerful!

Diagrams won't render

Hi there,
I'm using this plugin with the Learn2 theme (via the Skeleton: Learn2 with Git Sync Site).
When I put in the sample markdown, for either a flowchart or a sequence diagram, the instructions are not being rendered as a diagram. They just appear as text.

For example:

[sequence]
A->B:Hi C for me !
B-->A:With pleasure
B->C:A says hello
[/sequence]

is seen in the HTML as:

A->B:Hi C for me ! B-->A:With pleasure B->C:A says hello

I was expecting it to convert to svg.

I'm using Chrome on Ubuntu.

[EDIT]
I've noticed that the console is stating:
(index):21 Uncaught ReferenceError: $ is not defined
It appears to be referring to this line:
$(document).ready(function() {
So, is there a dependency on JQuery that isn't being met?
[/EDIT]

Thanks,

Mark

Unexpected value 0 0 -Infinity -Infinity parsing viewBox attribute.

With the following code, the top two diagrams render, but not the last diagram.

Instead it just spits out the following text on the page "graph LR A[Square Rect] –> B((Circle)) A –> C(Round Rect) B –> D{Rhombus} C –> D" and adds "Unexpected value 0 0 -Infinity -Infinity parsing viewBox attribute." to the browser console log.

I thought all the mermaid diagrams weren't rendering correctly, but I was able to get a gantt chart to render so....

[sequence]
A->B:
B->C:
B->D:
[/sequence]

[mermaid]
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
[/mermaid]

[mermaid]
graph LR
A[Square Rect] --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
[/mermaid]

add the ability to save/export the diagram as svg

A nice feature you can see on https://bramp.github.io/js-sequence-diagrams/ is the ability to export the diagrams as an svg. This is quite useful when one wants to share diagrams as part of a documentation effort

Upgrade problems

Hello!

With the 1.0.0 version everything works like a charm, but then I saw .. and wanted to use mermaid charts..
If I upgrade to the 1.0.1 version it breaks the whole site :-( even $ remains undefined.
The built js file has a syntax error. Where to begin debugging in this case?