타임라인
타임라인은 이벤트, 날짜 또는 기간을 설명하는 데 사용되는 다이어그램입니다. 일반적으로 시간의 흐름을 보여주기 위해 그래픽으로 렌더링되며, 일반적으로 시간 순서대로 구성됩니다. 기본 타임라인은 이벤트를 시간 순서대로 나열하며, 일반적으로 날짜를 표시로 사용합니다. 타임라인은 이벤트 간의 관계, 예를 들어 한 사람의 인생 사건 간의 관계를 표시하는 데에도 사용할 수 있습니다.
복사
임베드
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
