Zeitleiste
Eine Zeitachse ist ein Diagramm zur Veranschaulichung von Ereignissen, Daten oder Zeitabschnitten. Sie wird üblicherweise grafisch gerendert, um den Zeitverlauf darzustellen, und ist normalerweise chronologisch organisiert. Eine grundlegende Zeitachse listet Ereignisse in chronologischer Reihenfolge auf und verwendet üblicherweise Daten als Markierungen. Eine Zeitachse kann auch verwendet werden, um die Beziehungen zwischen Ereignissen darzustellen, beispielsweise die Beziehungen zwischen den Lebensereignissen einer Person.
Kopieren
Einbetten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntax
Die Syntax zum Erstellen einer Zeitachse ist einfach. Du musst mit der timeline-Syntax beginnen, damit mermaid weiß, dass du eine Zeitachse erstellen möchtest.
Danach kannst du der Zeitachse einen Titel hinzufügen. Dies erfolgt durch Hinzufügen der title-Syntax, gefolgt vom Titeltext.
Dann fügst du die Zeitachsendaten hinzu, die immer mit einem Zeitabschnitt beginnen, gefolgt von einem Doppelpunkt und dann dem Text des Ereignisses. Optional kannst du einen weiteren Doppelpunkt hinzufügen, gefolgt vom Text des Ereignisses. Daher kann jeder Zeitabschnitt ein oder mehrere Ereignisse haben.
Kopieren
Einbetten
{time period} : {event}
oder
Kopieren
Einbetten
{time period} : {event} : {event}
oder
Kopieren
Einbetten
{time period} : {event}
: {event}
: {event}
Hinweis: Zeitabschnitte und Ereignisse sind einfacher Text und nicht auf Zahlen beschränkt.
mermaid.grammar_timeline_note_see_up_exemport_s
Kopieren
Einbetten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Auf diese Weise können wir mithilfe einer Textgliederung eine Zeitachse generieren. Die Reihenfolge von Zeitabschnitten und Ereignissen ist wichtig, da sie zum Zeichnen der Zeitachse verwendet wird. Der erste Zeitabschnitt wird auf der linken Seite der Zeitachse platziert, der letzte Zeitabschnitt auf der rechten Seite der Zeitachse.
Wenn mehrere Ereignisse im selben Zeitabschnitt auftreten, befindet sich das erste Ereignis oben in diesem bestimmten Zeitabschnitt und das letzte Ereignis unten in diesem bestimmten Zeitabschnitt.
Zeitabschnitte gruppieren
Du kannst Zeitabschnitte in verschiedene Abschnitte/Epochen gruppieren. Dies kann durch Hinzufügen der section-Syntax, gefolgt vom Abschnittsnamen, erreicht werden.
Alle nachfolgenden Zeitabschnitte werden in diesem Abschnitt platziert, bis ein neuer Abschnitt definiert wird.
Wenn kein Abschnitt definiert ist, werden alle Zeitabschnitte im Standardabschnitt platziert.
mermaid.grammar_timeline_default_see_one_some_part
Kopieren
Einbetten
timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam <br>power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data, 3D printing
Wie du sehen kannst, werden Zeitabschnitte in Abschnitte platziert und die Abschnitte in der Reihenfolge angeordnet, in der sie definiert wurden.
Alle Zeitabschnitte und Ereignisse unter einem angegebenen Abschnitt folgen einem ähnlichen Farbschema; dies dient dazu, die Beziehungen zwischen Zeitabschnitten und Ereignissen leichter erkennbar zu machen.
Zeilenumbruch bei langen Zeitabschnitten oder langen Ereignissen
Standardmäßig wird bei zu langem Text von Zeitabschnitten und Ereignissen automatisch umgebrochen.
Du kannst auch verwenden, um einen Zeilenumbruch zu erzwingen.
mermaid.grammar_timeline_force_one_this_time_long
Kopieren
Einbetten
timeline
title England's History Timeline
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
Kopieren
Einbetten
timeline
title MermaidChart 2023 Timeline
section 2023 Q1 <br> Release Personal Tier
Bullet 1 : sub-point 1a : sub-point 1b
: sub-point 1c
Bullet 2 : sub-point 2a : sub-point 2b
section 2023 Q2 <br> Release XYZ Tier
Bullet 3 : sub-point <br> 3a : sub-point 3b
: sub-point 3c
Bullet 4 : sub-point 4a : sub-point 4b
Stil von Zeitabschnitten und Ereignissen
Wie bereits erwähnt, hat jeder Abschnitt ein Farbschema, und jeder Zeitabschnitt und jedes Ereignis unter einem Abschnitt folgen demselben Farbschema.
Zeitabschnitte individuell gestalten, d. h. jeder Zeitabschnitt (und seine entsprechenden Ereignisse) hat sein eigenes Farbschema.
Kopieren
Einbetten
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Hinweis: Da kein Abschnitt definiert ist, hat jeder Zeitabschnitt und seine entsprechenden Ereignisse sein eigenes Farbschema.
Benutzerdefiniertes Farbschema
Du kannst das Farbschema mit den Themenvariablen cScale0 bis cScale11 anpassen, wodurch die Hintergrundfarbe geändert wird. Mermaid ermöglicht es dir, für bis zu 12 Abschnitte einzigartige Farben festzulegen, wobei die Variable cScale0 die Farbe des ersten Abschnitts oder Zeitabschnitts steuert, die Variable cScale1 die Farbe des zweiten Abschnitts und so weiter. Wenn es mehr als 12 Abschnitte gibt, beginnt das Farbschema sich zu wiederholen.
Wenn du auch die Vordergrundfarbe eines Abschnitts ändern möchtest, kannst du dies mit der Themenvariable erreichen, die den Variablen cScaleLabel0 bis cScaleLabel11 entspricht.
Hinweis: Die Standardwerte dieser Themenvariablen stammen aus dem ausgewählten Thema. Wenn du die Standardwerte überschreiben möchtest, kannst du mit der initialize-Syntax benutzerdefinierte Themenvariablenwerte hinzufügen.
Beispiel:
Jetzt überschreiben wir die Standardwerte der Variablen cScale0 bis cScale2:
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'default'
themeVariables:
cScale0: '#ff0000'
cScaleLabel0: '#ffffff'
cScale1: '#00ff00'
cScale2: '#0000ff'
cScaleLabel2: '#ffffff'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Thema
Mermaid unterstützt viele vordefinierte Themen, mit denen du ein zu dir passendes Thema finden kannst. Hinweis: Du kannst tatsächlich die Variablen eines vorhandenen Themas überschreiben, um dein eigenes benutzerdefiniertes Thema zu erstellen.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Hinweis: Um das Thema zu ändern, kannst du die initialize-Syntax verwenden.
Basis-Thema
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'base'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Wald-Thema
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'forest'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Dunkles Thema
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'dark'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Standard-Thema
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'default'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
Neutrales Thema
Kopieren
Einbetten
---
config:
logLevel: 'debug'
theme: 'neutral'
---
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
