Línea de tiempo
La línea de tiempo es un tipo de gráfico que sirve para ilustrar eventos, fechas o periodos. Normalmente se renderiza de forma gráfica para mostrar el paso del tiempo y, por lo general, se organiza en orden cronológico. La línea de tiempo básica enumera los eventos en orden cronológico y normalmente usa fechas como marcas. La línea de tiempo también puede usarse para mostrar las relaciones entre eventos, por ejemplo, las relaciones entre los acontecimientos de la vida de una persona.
Copiar
Insertar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Sintaxis
La sintaxis para crear una línea de tiempo es muy sencilla. Debes empezar con la sintaxis timeline, para que mermaid sepa que quieres crear una línea de tiempo.
Después, puedes añadir un título a la línea de tiempo. Esto se hace añadiendo la sintaxis title, seguida del texto del título.
Después se añaden los datos de la línea de tiempo, que siempre empiezan por un periodo, seguido de dos puntos y luego el texto del evento. Opcionalmente puedes añadir otro par de dos puntos y luego el texto del evento. Por lo tanto, cada periodo puede tener uno o varios eventos.
Copiar
Insertar
{time period} : {event}
o
Copiar
Insertar
{time period} : {event} : {event}
o
Copiar
Insertar
{time period} : {event}
: {event}
: {event}
Nota: tanto los periodos como los eventos son texto simple y no se limitan a números.
mermaid.grammar_timeline_note_see_up_exemport_s
Copiar
Insertar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Así podemos usar el esquema de texto para generar la línea de tiempo. El orden de los periodos y los eventos es importante, porque se usará para dibujar la línea de tiempo. El primer periodo se colocará a la izquierda de la línea de tiempo y el último periodo se colocará a la derecha de la línea de tiempo.
Cuando ocurren varios eventos en el mismo periodo, el primer evento estará en la parte superior de ese periodo concreto y el último evento se colocará en la parte inferior de ese periodo concreto.
Agrupar periodos
Puedes agrupar los periodos en distintas secciones/épocas. Esto se puede hacer añadiendo la sintaxis section, seguida del nombre de la sección.
Todos los periodos siguientes se colocarán en esta sección hasta que se defina una nueva sección.
Si no se define ninguna sección, todos los periodos se colocarán en la sección predeterminada.
mermaid.grammar_timeline_default_see_one_some_part
Copiar
Insertar
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
Como puedes ver, los periodos se colocan en las distintas secciones, y las secciones se ordenan según el orden en que se definieron.
Todos los periodos y eventos de una sección determinada siguen un esquema de color similar; esto se hace para que sea más fácil ver la relación entre los periodos y los eventos.
Salto de línea para periodos o eventos largos
De forma predeterminada, si el texto de los periodos y los eventos es demasiado largo, se divide automáticamente en líneas.
También puedes forzar el salto de línea.
mermaid.grammar_timeline_force_one_this_time_long
Copiar
Insertar
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.
Copiar
Insertar
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
Estilo de los periodos y los eventos
Como se mencionó antes, cada sección tiene un esquema de color, y cada periodo y evento de una sección sigue el mismo esquema de color.
Establecer el estilo de cada periodo por separado, es decir, cada periodo (y sus eventos correspondientes) tiene su propio esquema de color.
Copiar
Insertar
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Nota: no se define ninguna sección; cada periodo y sus eventos correspondientes tienen su propio esquema de color.
Esquema de color personalizado
Puedes personalizar el esquema de color con las variables de tema cScale0 a cScale11, lo que cambiará el color de fondo. Mermaid te permite establecer colores únicos para hasta 12 secciones, donde la variable cScale0 controla el color de la primera sección o periodo, la variable cScale1 controla el color de la segunda sección, y así sucesivamente. Si hay más de 12 secciones, el esquema de color comenzará a repetirse cíclicamente.
Si además quieres cambiar el color de primer plano de una sección, puedes hacerlo con la variable de tema correspondiente a las variables cScaleLabel0 a cScaleLabel11.
Nota: los valores predeterminados de estas variables de tema se toman del tema seleccionado. Si quieres sobrescribir los valores predeterminados, puedes usar la sintaxis initialize para añadir valores de variables de tema personalizados.
Ejemplo:
Ahora sobrescribamos los valores predeterminados de las variables cScale0 a cScale2:
Copiar
Insertar
---
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
Tema
Mermaid admite muchos temas predefinidos que puedes usar para encontrar el tema que más te convenga. Nota: de hecho, puedes sobrescribir las variables de un tema existente para crear tu propio tema personalizado.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Nota: para cambiar el tema, puedes usar la sintaxis initialize.
Tema base
Copiar
Insertar
---
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
Tema bosque
Copiar
Insertar
---
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
Tema oscuro
Copiar
Insertar
---
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
Tema predeterminado
Copiar
Insertar
---
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
Tema neutro
Copiar
Insertar
---
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
