Feature request: Mermaid (Markdown)

[mtompkins]

Mermaid - with the fantastic move to MarkDown, I'd love to see this utility incorporated. I haven't seen mention of it anywhere so I'm adding it here. https://github.com/knsv/mermaid It is SO convenient especially in a FAQ system

[thorsten]

It's just a JS library as far as I see, right?

[mtompkins]

Yes, and NPM friendly which should integrate nicely (and hopefully seemlessly) for you.

[thorsten]

Should be easy to add that even to 2.9

[mtompkins]

I was thinking it should be a very quick and solid addition for phpmyfaq (and of course the user base) based on the addition of Markdown. Hopefully that proves to be the case.

[thorsten]

Will be added in the upcoming RC2 release.

[mtompkins]

Took RC2 for a spin just now - really looks polished and amazing! Congratulations!

Just a note / followup on mermaid - it doesn't seem to be incorporated in RC2. Perhaps you meant RC3?

Attached is some markdown to test mermaid to try and help.

:

markdown-test.txt

[thorsten]

Hm, strange. Does it need some configuration? Just added the library

[mtompkins]

Here is the relevant doc: http://knsv.github.io/mermaid/#installation

Presume you are doing:

<script src="mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

[mtompkins]

Further reading seems to indicate best way forward is a call to the API:

http://knsv.github.io/mermaid/#api-usage

[thorsten]

Okay, I forgot that :-(
Sorry, preparing a 3rd RC asap

[mtompkins]

Not a problem ... that's why it's an RC!! Will test when available.

[thorsten]

Added these lines, but it still don't work...

[mtompkins]

I see your approach was to enable mermaid only if markdown is active. Shall I suggest we start with enabling mermaid at all times (it works with html directly) as a place to start?

The following HTML should generate a simple diagram:

<div class="mermaid">
        graph LR
            A-->B
            B-->C
            C-->A
            D-->C
</div>

[thorsten]

Right, shouldn't have any side effects. One thing that seems to break the code is that the arrows are encoded...

[mtompkins]

I've seen something similar on one of the downstream projects (arrow / symbol issue). I'll see if I can find it, test & revert.

[mtompkins]

Which markdown to HTML renderer are you using?

[mtompkins]

Here are the encoding (arrow) references I was remembering:

• http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/
• http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/

[mtompkins]

OK - here's where I am and I think we should pause...there is an upstream issue.

What I've done is relocate the instantiation of mermaid from artikel.php to index.tpl on the bottom as is often used for <script> instantiation. Also as mermaid works with or without markdown (i.e. standard HTML works find to produce a graphic) I believe it should be always enabled.

Doing that minor edit I'm left with this error:

No longer working - Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity"

Here are the relevant issues on upstream channels:

• Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity" mermaid-js/mermaid#291
• No longer working - Invalid value for <svg> attribute viewBox="0 0 -Infinity -Infinity" jasonbellamy/jekyll-mermaid#5

Once we see how these are resolved I'll pick it back up. Once we render the graphics correctly I'll see about the direct implementation to the markdown editor.

If you are using marked as the MD --> HTML engine we can easily handle the arrows based on the references here: #1091 (comment)

[thorsten]

Okay, I'll postpone this feature to 2.9.1. Thanks for testing and investigating!

[thorsten]

btw, we use Parsedown: http://parsedown.org/

[thorsten]

Okay, so these things are missing:

• end user documentation
• Mermaid in admin preview
• editor helper plus replacing the
  wrapper with some more user friendly

[mtompkins]

Please see: mermaid-js/mermaid#330 (comment)

In order to accurately answer questions the mermaid developer may ask, I think direct interaction between you and him is probably the best road forward. I'll monitor the exchange and offer any help I can.

[knsv]

Hello :)

Is there a public url to the page with the missing arrows? If so I can take a look and see if I see something that could cause the problem.

[thorsten]

Hi, I could install a current snapshot somewhere.

[knsv]

Sounds like a plan!

[thorsten]

Installation will be up and running the next days, sorry for the delay.

[thorsten]

Sorry for the delay, here's the installation:
http://jen.demo.phpmyfaq.de/

Username
admin
Password
demoadmin

[thorsten]

Any news on this?

[thorsten]

Ne feedback anymore. :(

[knsv]

Sorry, on varation. Will look at this when I get back. 

Get Outlook for iOS

On Sun, Aug 7, 2016 at 7:57 PM +0200, "Thorsten Rinne" [email protected] wrote:

Ne feedback anymore. :(

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[knsv]

I have looked at this now. Before we get to mermaid I must say that phpMyFAQ is getting to be an impressive publishing system, simple, elegant and versatile. Well done!

Now to the issue at hand. I think the problem is caused by the use of a base tag in phpMyFAQ. This messes up the references to the arrow heads in the generated svg markup. Fortunately there is a configuration option for this in mermaid. If you initialize mermaid with the option arrowMarkerAbsolute set to true it should fix the arrows. Then the references in the arrows heads will be absolute based in the url in the page. This is not always what you want if you for instance want to render the svg outside of the browser but in this case it should be ok.

    var config = {
        startOnLoad:true,
        arrowMarkerAbsolute:true
    };
    mermaid.initialize(config);

Try it out and let me know how it goes!

[thorsten]

Thanks a lot, fixed for 2.9.5!