0 Daumen
630 Aufrufe

Bei einer alten Frage wollte ich ein Foto, das ein händisch gezeichnetes Baumdiagramm zeigt, in eine saubere Form übertragen. Genau so, wie wir auch handschriftliche Formel-Notizen nach Latex übertragen.

Das Erstellen des Baumdiagramms, dachte ich mir, sollte im besten Fall mit Code/Syntax geschehen, damit das Diagramm auch später verändert werden kann.

Dabei ist mir der im Januar 2018 vorgestellte Mermaid-Editor wieder eingefallen, der von der Mathelounge-Community zu wenig Aufmerksamkeit erhielt.

Der Mermaid-Editor lässt sich auch sehr gut benutzen, um Baumdiagramme zu gestalten.

Mit einer Code-Eingabe wie:

graph TD

A(Ereignis)
A -->B[1]
A -->C(2)
A -->D(3)
A -->E(4)
A -->F(5)
A -->G(6)

B -->B1(W)
B -->B2(Z)

C -->C1(W)
C -->C2(Z)

D -->D1(W)
D -->D2(Z)

E -->E1(W)
E -->E2(Z)

F -->F1(W)
F -->F2(Z)

G -->G1(W)
G -->G2(Z)

Erhält man dieses Baumdiagramm:

blob.png
https://mermaid-js.github.io/mermaid-live-editor/edit#eyJjb2RlIjoiZ3JhcGggVERcblxuQShFcmVpZ25pcylcbkEgLS0-QlsxXVxuQSAtLT5DKDIpXG5BIC0tPkQoMylcbkEgLS0-RSg0KVxuQSAtLT5GKDUpXG5BIC0tPkcoNilcblxuQiAtLT5CMShXKVxuQiAtLT5CMihaKVxuXG5DIC0tPkMxKFcpXG5DIC0tPkMyKFopXG5cbkQgLS0-RDEoVylcbkQgLS0-RDIoWilcblxuRSAtLT5FMShXKVxuRSAtLT5FMihaKVxuXG5GIC0tPkYxKFcpXG5GIC0tPkYyKFopXG5cbkcgLS0-RzEoVylcbkcgLS0-RzIoWikiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ


Wer also sauberer arbeiten möchte (so wie auch mit Latex), kann diesen Editor verwenden.

Sollte er zukünftig sogar als Standard-Werkzeug eingesetzt werden, dann könnten wir auch eine Einbettfunktion (also wie bei Latex) entwickeln.


Nachtrag:

Mit der neuen Version des Mermaid-Editors kann man auch Kreisdiagramme erstellen.

Beispiel-Code:

pie title Tiere im Haushalt
  "Hunde" : 386
  "Katzen" : 85
  "Mäuse" : 15
         

Ergebnis:

blob.png
https://mermaid-js.github.io/mermaid-live-editor/edit#eyJjb2RlIjoicGllIHRpdGxlIFRpZXJlIGltIEhhdXNoYWx0XG4gICAgXCJIdW5kZVwiIDogMzg2XG4gICAgXCJLYXR6ZW5cIiA6IDg1XG4gICAgXCJNw6R1c2VcIiA6IDE1IiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6ZmFsc2UsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjpmYWxzZX0


Tipps:

1. Direkt beim Editor https://mermaid-js.github.io/mermaid-live-editor/edit findet man unter "Sample Diagrams" Vorlagen, die sich wunderbar nutzen lassen.

2. Möchte man eine Eingabe verlinken, dann kann man direkt den Link oben aus dem Browser heraus kopieren. (Dieser aktualisiert sich automatisch mit jeder Eingabe.)


Docs: https://mermaid-js.github.io/mermaid/#/

geschlossen: News
von mathelounge
Avatar von 14 k
Es sollte nicht nötig sein, dass Baumdiagramme vollständig vorgemalt werden. Oft sind nur bestimmte Pfade durch den Baum relevant / interessant zudem können die Lernenden dann gar nichts mehr selbst zum Lösungsweg beitragen. Lerneffekt wohl gleich Null.

Man müsste

die einzelnen Aeste anschreiben mit z.B. Wahrscheinlichkeiten oder "Ausfällen in einer gewissen Baumtiefe" usw. können,

mit Puenktchen für weggelassene oder uninteressante Baumteile arbeiten können.

verschiedene Aeste verschiedenfarbig markieren können.

Aus Platzgründen die Möglichkeit bieten den Baum auch horizontal oder schräg zu zeichnen und die (perfekt lesbare = gross genug für alle oder zoombar) Schrift dennoch horizontal auf den Bildschirm zaubern.

Meines Wissens nach ist all das Genannte möglich mit dem Mermaid Editor.

Ein anderes Problem?

Stell deine Frage

Willkommen bei der Mathelounge! Stell deine Frage einfach und kostenlos

x
Made by a lovely community