Chronologie
La chronologie est un type de diagramme servant à illustrer des événements, des dates ou des périodes. Elle est généralement rendue graphiquement pour montrer l'écoulement du temps, et est habituellement organisée par ordre chronologique. La chronologie de base liste les événements par ordre chronologique, en utilisant généralement des dates comme marqueurs. La chronologie peut également servir à montrer les relations entre les événements, par exemple entre les événements de la vie d'une personne.
Copier
Intégrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Syntaxe
La syntaxe de création d'une chronologie est simple. Elle doit commencer par la syntaxe timeline, pour indiquer à mermaid que vous souhaitez créer une chronologie.
Ensuite, vous pouvez ajouter un titre à la chronologie. Cela se fait en ajoutant la syntaxe title, suivie du texte du titre.
Ajoutez ensuite les données de la chronologie : celles-ci commencent toujours par une période, suivie d'un deux-points, puis du texte de l'événement. Vous pouvez éventuellement ajouter un autre deux-points, puis le texte de l'événement. Ainsi, chaque période peut comporter un ou plusieurs événements.
Copier
Intégrer
{time period} : {event}
ou
Copier
Intégrer
{time period} : {event} : {event}
ou
Copier
Intégrer
{time period} : {event}
: {event}
: {event}
Remarque : les périodes et les événements sont de simples textes, qui ne se limitent pas à des nombres.
mermaid.grammar_timeline_note_see_up_exemport_s
Copier
Intégrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Nous pouvons ainsi utiliser un plan textuel pour générer une chronologie. L'ordre des périodes et des événements est important, car il sert à tracer la chronologie. La première période est placée à gauche de la chronologie, et la dernière période à droite de la chronologie.
Lorsque plusieurs événements se produisent au cours de la même période, le premier événement est placé en haut de cette période précise, et le dernier en bas de cette période.
Regrouper les périodes
Vous pouvez regrouper les périodes en différentes sections/époques. Cela peut se faire en ajoutant la syntaxe section, suivie du nom de la section.
Toutes les périodes suivantes seront placées dans cette section, jusqu'à la définition d'une nouvelle section.
Si aucune section n'est définie, toutes les périodes seront placées dans la section par défaut.
mermaid.grammar_timeline_default_see_one_some_part
Copier
Intégrer
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
Comme vous pouvez le voir, les périodes sont placées dans les différentes sections, et les sections sont disposées dans l'ordre où elles sont définies.
Toutes les périodes et tous les événements d'une section donnée suivent un jeu de couleurs similaire, afin de mieux visualiser les relations entre les périodes et les événements.
Retour à la ligne pour les périodes ou événements longs
Par défaut, si le texte d'une période ou d'un événement est trop long, il passe automatiquement à la ligne.
Vous pouvez également forcer le retour à la ligne.
mermaid.grammar_timeline_force_one_this_time_long
Copier
Intégrer
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.
Copier
Intégrer
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
Style des périodes et des événements
Comme mentionné précédemment, chaque section possède un jeu de couleurs, et chaque période et événement de cette section suit le même jeu de couleurs.
Définir le style d'une période de manière indépendante, c'est-à-dire que chaque période (et ses événements correspondants) a son propre jeu de couleurs.
Copier
Intégrer
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Remarque : aucune section n'étant définie, chaque période et ses événements correspondants ont leur propre jeu de couleurs.
Jeu de couleurs personnalisé
Vous pouvez personnaliser le jeu de couleurs à l'aide des variables de thème cScale0 à cScale11, ce qui modifie la couleur de fond. Mermaid permet de définir des couleurs distinctes pour un maximum de 12 sections, la variable cScale0 contrôlant la couleur de la première section ou période, la variable cScale1 la couleur de la deuxième section, et ainsi de suite. Si les sections dépassent 12, le jeu de couleurs recommence à boucler.
Si vous souhaitez également modifier la couleur de premier plan d'une section, vous pouvez utiliser la variable de thème correspondante, à savoir cScaleLabel0 à cScaleLabel11 .
Remarque : les valeurs par défaut de ces variables de thème proviennent du thème choisi. Si vous souhaitez les remplacer, vous pouvez utiliser la syntaxe initialize pour ajouter des valeurs de variables de thème personnalisées.
Exemple :
Remplaçons maintenant les valeurs par défaut des variables cScale0 à cScale2 :
Copier
Intégrer
---
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
Thème
Mermaid prend en charge de nombreux thèmes prédéfinis, que vous pouvez utiliser pour trouver un thème qui vous convient. Remarque : vous pouvez en fait remplacer les variables d'un thème existant pour créer votre propre thème personnalisé.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Remarque : pour changer de thème, vous pouvez utiliser la syntaxe initialize.
Thème de base
Copier
Intégrer
---
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
Thème forêt
Copier
Intégrer
---
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
Thème sombre
Copier
Intégrer
---
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
Thème par défaut
Copier
Intégrer
---
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
Thème neutre
Copier
Intégrer
---
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
