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.