The open source project Mermaid, which was developed by Knut Sveidquist, allows to create digrams and flowcharts online using a special markdown-like syntax.
The Redmine Reporting Plugin supports this functionality by integrating a corresponding Mermaid syntax into the wiki of a Redmine project. This gives you the possibility to implement diagrams or flowcharts in Redmine wiki pages.
Redmine Reporting Mermaid Flowcharts
So if you are working with the Redmine Reporting plugin and want to use charts or flowcharts, you can access the already integrated library by simply using the corresponding syntax in the wiki pages of your Redmine projects.
Mermaid Custom Theme
New from Redmine Reporting plugin version 3.0.1 is that you can override the Mermaid Theme and Mermaid Theme Variables for Mermaid diagrams to adjust the look to your personal needs.
This was already possible before (see example below):
mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
However, not system-wide, but by manually implementing the code into the corresponding syntax per flowchart. The system-wide, one-time integration saves the manual adjustment per chart.
Learn how to do this:
- a custom Redmine theme must be used (i.e. not one that comes with Redmine by default, but any other - purchased, or self-made).
- the themes for Redmine are usually stored under REDMINE/public/themes. If you already use your own custom theme, this is optimal.
- in that case you just have to put a corresponding JS file in the corresponding Custom Redmine Theme directory. And this is created under THEME_DIR/javascripts/theme.js.
- this file (theme.js) must have the following content (it is important that the filename is kept exactly, so that Redmine executes also exactly this Javascript file):
if (globalThis !== undefined) {
// current supported themes: base, default, dark, forest and neutral
globalThis.mermaidTheme = 'neutral';
// @see https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table
// for valid variables
globalThis.mermaidThemeVariables = {
'fontSize': '14px',
'textColor': '#f64610',
'background': '#eeeeee'
};
}
The file can of course be supplemented with the help of the Mermaid variables. Please use the variables provided on the GitHub project page, whose scope can change at any time.
Currently the following Mermaid themes are supported:
- base
- default
- dark
- forest
- neutral
Unfortunately, most of the variables provided by Mermaid do not work at the moment. In upcoming, newer versions of Mermaid this will hopefully be fixed. So you have to see for yourself which ones you need and if they work or not.