CuteMarkED habe ich hier vor rund zwei Jahren mit dem MarkdownPad verglichen. Dabei hatte ich im Fazit angekündigt, dass ich CuteMarkED im Auge behalten werde. Das habe ich getan.
Ein paar kleine Anmerkungen von mir sind in das Update zum Jahreswechsel eingeflossen. Eine seit Mitte 2015 verfügbare Funktion von CuteMarkED möchte ich nachtragen: Die Unterstützung von Mermaid1. Das kannte ich bis zur Integration in CuteMarkED nicht und habe es bisher nicht so recht nutzen können, weil es noch einen (von mir gemeldeten) Bug gab. Der ist jetzt behoben.
Mit Mermaid lassen sich sehr einfach ohne „Grafikfummelei“ Diagramme generieren. In schlichter Ausführung zwar, im täglichen Leben reicht das für eine strukturierte Darstellung von etwas typischerweise völlig aus. Einziger Wehrmutstropfen (im Augenblick) ist, dass die Grafiken beim HTML-Export als Code geschrieben werden. Schicker wäre natürlich, es gäbe eingefügte Bilder. Im PDF klappt das, daher vermute ich, dass hier lediglich noch eine Option zur Wahl Mermaid-Code | Bild als HTML fehlt.
Schauen wir uns das doch mal an (Die Ergebnisse sind Bilder, die per Screenshot gesichert wurden — bevor jemand fragt):
~~~mermaid
graph TD;
CD[Cutemark]-->MD[Schnelles Diagramm]
MD[Schnelles Diagramm]-->Buoa[Bericht schreiben]
MD-->kreis⟨⟨Welche⟩⟩
kreis-->Flowchart
kreis-->Gantt
kreis-->Sequenz
Flowchart-->PDF
Gantt-->PDF
Sequenz-->PDF
~~~
Das lässt sich runterschreiben und wird in CuteMarkED als Grafik dargestellt. Vorausgesetzt, die Schalter für die Anzeige sind gesetzt. Weil das Bildchenmachen doch einiges an Rechenkraft kostet, wird es bei mehreren zäher. Daher lohnt sich der regelmäßige Einsatz von F5. Damit wird die Ansicht von HTML-Code auf HTML-Ansicht gewechselt. In der Code-Ansicht lässt es sich flüssig schreiben.
Aus dem Code oben wird ein Flowchart:
In Flowcharts gibt es die relevanten Elemente, unterschiedliche Verbinder und eine einfache Möglichkeit für die Ausrichtung. Die wird in der Typisierung (Zeile 2) mit LinksRechts, TopDown, RechtsLinks, sogar BottomTop angegeben. Sogar „Unterprogramme“ sind realisierbar.
~~~mermaid
graph LR
subgraph Sub
U1-->UE{Entscheidung}
UE-->U2
UE--> U3⟨Abgerundet⟩
end
A[Rechteckig] --Text--> B⟨Abgerundet⟩
B --> C{Entscheidung}
C -.->|Text| D⟨⟨Kreis⟩⟩
C -.Text.-> E>Fahne]
C -.Text.-> U1
U2-->D
U3--Text-->E
D ==>Z⟨Ziel⟩
E ==Text==>Z
~~~
Die Technik ist bestechend einfach: Jede Zeile zeigt eine Verbindung. Wenn ich die im Blick habe, erzeugt Mermaid eine vernünftige Grafik. Dabei ist der rote Strich das aktuelle Datum. Unbestechlich, denn der wird (in der Live-Anzeige) jeweils generiert und ist (meines Wissens) nicht beeinflussbar.
Für ein Gantt-Diagramm ist es ähnlich:
<script>
mermaid.ganttConfig = {
numberSectionStyles:2
};
</script>
~~~mermaid
gantt
title Ein Gantt-Diagramm
dateFormat DD.MM.YYYY
section Zeitraum
Reserviert :active, r1, 01.01.2016,01.02.2016
section Start
Vorbereitung :done, s0,01.01.2016,1d
Kickoff :s1, 02.01.2016, 1d
section Aufgaben
Doku :active, d1, after s1, 3d
Machen :active, d2, after d1, 2d
Kontrolle :active, crit, d3, after d2, 1d
Freigabe:after d3,1d
section ToDo
Einkaufen gehen :f1,05.01.2016, 4h
Telefonat mit Thomas :f2, 07.01.2016, 1h
Marketing :crit, after s1,25d
section fun
Release-Party :k1, 30.01.2016,5h
~~~
Das vorangestellte Script dient der Einstellung des Stils. Ohne das gibt es nur schwarze Balken.
Das sieht dann so aus:
Was sich anfänglich womöglich etwas kryptisch liest, erklärt sich beim Hinschreiben fast alleine und macht diese Funktion für den täglichen Einsatz spannend. Denn es ist (fast) alles da, was beim Dokumentieren, Planen, etc. gebraucht wird. Genial wäre ein „HTML-Embedded-Export“, bei dem die Grafiken als eingebettete Grafik samt HTML ins Klemmbrett kopiert werden könnten. Dann wäre das — ratz fatz — in der Mail an den Kunden, Partner,… — da muss ich doch gleich mal eine Mail schreiben.
Wem jetzt die Darstellung der Sequenz (s.o., erstes Diagramm) fehlt, dem empfehle ich den ebenfalls eingangs angeführten Link. Außerdem gibt es noch eine Webseite zum Üben1.