Временная шкала
Временная шкала — это диаграмма, используемая для иллюстрации событий, дат или периодов времени. Обычно она рендерится графически, чтобы показать течение времени, и обычно организуется в хронологическом порядке. Базовая временная шкала перечисляет события в хронологическом порядке, обычно используя даты в качестве меток. Временную шкалу также можно использовать для отображения отношений между событиями, например отношений между событиями жизни человека.
Копировать
Встраивание
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Синтаксис
Синтаксис создания временной шкалы очень прост. Нужно начать с синтаксиса timeline, чтобы сообщить mermaid, что вы хотите создать временную шкалу.
После этого к временной шкале можно добавить заголовок. Это делается путём добавления синтаксиса title, за которым следует текст заголовка.
Затем добавляются данные временной шкалы, всегда начинающиеся с периода времени, за которым следует двоеточие, а затем текст события. При желании можно добавить ещё одно двоеточие, а затем текст события. Таким образом, каждый период времени может содержать одно или несколько событий.
Копировать
Встраивание
{time period} : {event}
или
Копировать
Встраивание
{time period} : {event} : {event}
или
Копировать
Встраивание
{time period} : {event}
: {event}
: {event}
Примечание: и периоды времени, и события — это простой текст, не ограниченный числами.
mermaid.grammar_timeline_note_see_up_exemport_s
Копировать
Встраивание
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Таким образом, мы можем использовать текстовый план для создания временной шкалы. Порядок периодов времени и событий важен, поскольку он используется для отрисовки временной шкалы. Первый период времени размещается слева на временной шкале, последний период времени размещается справа на временной шкале.
Когда в одном периоде времени происходит несколько событий, первое событие размещается в верхней части этого конкретного периода, а последнее событие — в нижней части этого конкретного периода.
Группировка периодов времени
Вы можете группировать периоды времени в разные разделы/эпохи. Это можно сделать, добавив синтаксис section, за которым следует имя раздела.
Все последующие периоды времени будут размещаться в этом разделе, пока не будет определён новый раздел.
Если ни один раздел не определён, все периоды времени размещаются в разделе по умолчанию.
mermaid.grammar_timeline_default_see_one_some_part
Копировать
Встраивание
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
Как вы можете видеть, периоды времени размещаются в разделах, а разделы упорядочиваются в порядке их определения.
Все периоды времени и события внутри указанного раздела следуют схожей цветовой схеме; это сделано, чтобы было легче увидеть отношения между периодами времени и событиями.
Перенос длинных периодов времени или длинных событий
По умолчанию, если текст периода времени или события слишком длинный, выполняется автоматический перенос.
Вы также можете принудительно выполнить перенос.
mermaid.grammar_timeline_force_one_this_time_long
Копировать
Встраивание
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.
Копировать
Встраивание
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
Стиль периодов времени и событий
Как упоминалось ранее, каждый раздел имеет цветовую схему, и каждый период времени и событие в разделе следуют одной и той же цветовой схеме.
Отдельная настройка стиля периодов времени, то есть каждый период времени (и соответствующее ему событие) имеет свою цветовую схему.
Копировать
Встраивание
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Примечание: ни один раздел не определён, поэтому каждый период времени и соответствующее ему событие имеют свою цветовую схему.
Пользовательская цветовая схема
Вы можете настроить цветовую схему с помощью переменных темы cScale0 — cScale11, что изменит цвет фона. Mermaid позволяет задать уникальные цвета максимум для 12 разделов, где переменная cScale0 управляет цветом первого раздела или периода времени, переменная cScale1 управляет цветом второго раздела и так далее. Если разделов больше 12, цветовая схема начинает повторяться циклически.
Если вы также хотите изменить цвет переднего плана некоторого раздела, это можно сделать с помощью переменных темы, соответствующих переменным cScaleLabel0 — cScaleLabel11.
Примечание: значения по умолчанию этих переменных темы берутся из выбранной темы. Если вы хотите переопределить значения по умолчанию, можно использовать синтаксис initialize, чтобы добавить значения пользовательских переменных темы.
Пример:
Теперь давайте переопределим значения по умолчанию переменных cScale0 — cScale2:
Копировать
Встраивание
---
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
Тема
Mermaid поддерживает множество предопределённых тем, которые вы можете использовать, чтобы подобрать подходящую вам тему. Примечание: вы действительно можете переопределить переменные существующей темы, чтобы создать свою собственную пользовательскую тему.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Примечание: чтобы изменить тему, можно использовать синтаксис initialize.
Базовая тема
Копировать
Встраивание
---
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
Тема «Лес»
Копировать
Встраивание
---
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
Тёмная тема
Копировать
Встраивание
---
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
Тема по умолчанию
Копировать
Встраивание
---
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
Нейтральная тема
Копировать
Встраивание
---
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
