Das Open Source Projekt Mermaid, welches von Knut Sveidquist entwickelt wurde erlaubt es mittels einer speziellen markdown-ähnlichen Syntax Digramme und Flowcharts online zu erstellen.
Das Redmine Reporting Plugin unterstütz diese Funktionalität durch die Integration einer entsprechenden Mermaid-Syntax in der Wiki eines Redmine Projekts. Dadurch habt ihr die Möglichkeit Diagramme oder Flowcharts in Redmine Wikiseiten zu implementieren. Wie das funktioniert haben wir in einem älteren Blogbeitrag schon erklärt (siehe hierzu: Redmine Reporting Plugin unterstützt Mermaid Diagramme und Flowcharts).
Redmine Reporting Mermaid Flowcharts
Wenn ihr also mit dem Redmine Reporting Plugin arbeitet und Diagramme oder Flowcharts nutzen möchtet, dann könnt ihr auf die bereits integrierte Library zugreifen, indem ihr die entsprechende Syntax einfach in den Wikiseiten eurer Redmine Projekte nutzt.
Mermaid Custom Theme-Anpassungen
Neu ab Redmine Reporting Pluginversion 3.0.1 ist, dass man für Mermaid Diagramme das Mermaid Theme und Mermaid Theme Variablen überschreiben kann um die Optik an die persönlichen Bedürfnisse auszurichten.
Das war vorher auch schon möglich (siehe nachfolgendes Beispiel):
mermaid
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph LR
A:::someclass --> B
classDef someclass fill:#f96;
Jedoch nicht systemweit, sondern indem man manuell pro Flowchart den Code in die entsprechende Syntax implementiert hat. Durch die systemweite, einmalige Integration spart man sich die manuelle Anpassung pro Diagramm.
Erfahrt wie ihr hierzu vorgeht:
- es muss ein benutzerdefiniertes Custom Redmine Theme verwendet werden (also keines, was mit Redmine standardmäßig kommt, sondern irgend ein anderes - gekauft, oder selbst erstelltes).
- die Themes für Redmine werden normalerweise unter REDMINE/public/themes abgelegt. Wird von Dir schon ein eigenes Custom Theme verwendet, ist das optimal.
- in dem Fall must Du einfach im entsprechenden Custom Redmine Theme Verzeichnis nur eine entsprechende JS-Datei ablegen (theme.js). Und zwar wird diese unter THEME_VERZEICHNIS/javascripts/theme.js erstellt.
- diese Datei (theme.js) muss nachfolgenden Inhalt haben (wichtig dabei ist, dass der Dateiname exakt eingehalten wird, damit Redmine auch genau diese Javascript Datei ausführt):
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'
};
}
Die Datei kann natürlich mit Hilfe der durch Mermaid bereit gestellten Variablen entsprechend ergänzt werden. Bitte nutzt die auf der GitHub Seite bereit stehenden Variablen, deren Umfang sind jederzeit ändern kann.
Aktuell werden folgende Mermaid Themes unterstützt:
- base
- default
- dark
- forest
- neutral
Leider ist es aktuell jedoch so, dass die meisten der dort von Mermaid bereit gestellten Variablen aktuell nicht funktionieren. In kommenden, neueren Versionen von Mermaid wird das hoffentlich behoben. Du musst also selbst schauen, welche Du davon benötigst und ob diese schon gehen oder nicht.
