Redmine and mermaid.js integration

Thu, Apr 28, 2016

I love diagrams, flow charts, sequence diagrams and everything on thisisindexed.com. What I hate about them is having to install a fat application to create diagrams (see: Visio) and watch carefully designed diagrams die as software/flow whatever you have drawn evolves.

Happily I met mermaid.js today. It is text based, very easy to use and doesn’t require anything installed - as you can use the web editor see diagram instantly.

And we use redmine at work, trying to keep wiki pages updated and fruitful. Suddenly my curiosity itched me to find a really lazy way to support mermaid diagrams in redmine wiki pages. I have never written a single line of Ruby and not very keen on learning basic Ruby & redmine plugin development. Thankfully, things were much easier than I thought.

The first step is to include mermaid javascript and css files, I just added those three lines to /usr/share/redmine/app/views/layouts/base.html.erb file somewhere between <head> </head> tags

<link rel="stylesheet" href="http://knsv.github.io/mermaid/css/mermaid.css">
<script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/0.5.8/dist/mermaid.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

Then add lines below to /usr/share/redmine/lib/redmine/wiki_formatting/macros.rb to use mermaid macro in wiki editor.

desc "Add mermaid graphs to your wiki. Example:\n\n {{mermaid\ngraph TD;\n A-->B;\nA-->C;\nB-->D;\nC-->D;\n}}"
macro :mermaid do |obj, args, text|
  out = ''.html_safe
  out << content_tag('div', text, :class => 'mermaid')
  out
end

Now restart your redmine and try to play around in wiki pages

Enjoy if it also works for you.



  « Previous:
Next: »