Dòng thời gian
Trục thời gian là một loại biểu đồ dùng để minh họa các sự kiện, ngày tháng hoặc khoảng thời gian. Nó thường được kết xuất bằng đồ họa để hiển thị sự trôi qua của thời gian, và thường được tổ chức theo trình tự thời gian. Trục thời gian cơ bản liệt kê các sự kiện theo trình tự thời gian, thường dùng ngày làm dấu mốc. Trục thời gian cũng có thể được dùng để hiển thị mối quan hệ giữa các sự kiện, ví dụ mối quan hệ giữa các sự kiện trong cuộc đời của một người.
Sao chép
Nhúng
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : YouTube
2006 : Twitter
Cú pháp
Cú pháp tạo trục thời gian rất đơn giản. Cần bắt đầu bằng cú pháp timeline, để mermaid biết bạn muốn tạo trục thời gian.
Sau đó, có thể thêm tiêu đề cho trục thời gian. Việc này được thực hiện bằng cách thêm cú pháp title, theo sau là văn bản tiêu đề.
Sau đó thêm dữ liệu trục thời gian, luôn bắt đầu bằng một khoảng thời gian, theo sau là dấu hai chấm, rồi đến văn bản sự kiện. Bạn có thể chọn thêm một dấu hai chấm nữa, rồi đến văn bản sự kiện. Do đó, mỗi khoảng thời gian có thể có một hoặc nhiều sự kiện.
Sao chép
Nhúng
{time period} : {event}
hoặc
Sao chép
Nhúng
{time period} : {event} : {event}
hoặc
Sao chép
Nhúng
{time period} : {event}
: {event}
: {event}
Lưu ý: khoảng thời gian và sự kiện đều là văn bản đơn giản, không giới hạn ở con số.
mermaid.grammar_timeline_note_see_up_exemport_s
Sao chép
Nhúng
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Bằng cách này chúng ta có thể tận dụng dàn ý văn bản để tạo trục thời gian. Thứ tự của khoảng thời gian và sự kiện rất quan trọng, vì nó sẽ được dùng để vẽ trục thời gian. Khoảng thời gian đầu tiên sẽ được đặt ở bên trái của trục thời gian, khoảng thời gian cuối cùng sẽ được đặt ở bên phải của trục thời gian.
Khi nhiều sự kiện xảy ra trong cùng một khoảng thời gian, sự kiện đầu tiên sẽ ở phía trên của khoảng thời gian cụ thể đó, còn sự kiện cuối cùng sẽ được đặt ở phía dưới của khoảng thời gian cụ thể đó.
Nhóm các khoảng thời gian
Bạn có thể nhóm các khoảng thời gian vào các phần/thời đại khác nhau. Việc này có thể thực hiện bằng cách thêm cú pháp section, theo sau là tên phần.
Tất cả các khoảng thời gian tiếp theo sẽ được đặt trong phần này, cho đến khi định nghĩa phần mới.
Nếu không định nghĩa phần nào, tất cả các khoảng thời gian sẽ được đặt trong phần mặc định.
mermaid.grammar_timeline_default_see_one_some_part
Sao chép
Nhúng
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
Như bạn có thể thấy, các khoảng thời gian được đặt trong các phần, và các phần được sắp xếp theo thứ tự chúng được định nghĩa.
Tất cả các khoảng thời gian và sự kiện dưới một phần chỉ định đều tuân theo một bảng màu tương tự, làm vậy để dễ dàng thấy mối quan hệ giữa khoảng thời gian và sự kiện hơn.
Ngắt dòng cho khoảng thời gian dài hoặc sự kiện dài
Theo mặc định, nếu văn bản khoảng thời gian và sự kiện quá dài, sẽ tự động ngắt dòng.
Bạn cũng có thể dùng để buộc ngắt dòng.
mermaid.grammar_timeline_force_one_this_time_long
Sao chép
Nhúng
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.
Sao chép
Nhúng
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
Kiểu của khoảng thời gian và sự kiện
Như đã đề cập, mỗi phần có một bảng màu, và mỗi khoảng thời gian cũng như sự kiện dưới mỗi phần đều tuân theo cùng một bảng màu.
Đặt kiểu riêng cho từng khoảng thời gian, tức là mỗi khoảng thời gian (và các sự kiện tương ứng của nó) có bảng màu riêng.
Sao chép
Nhúng
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : YouTube
2006 : Twitter
Lưu ý: không định nghĩa phần nào, mỗi khoảng thời gian và các sự kiện tương ứng của nó có bảng màu riêng.
Bảng màu tùy chỉnh
Bạn có thể dùng các biến chủ đề cScale0 đến cScale11 để tùy chỉnh bảng màu, việc này sẽ thay đổi màu nền. Mermaid cho phép bạn đặt màu riêng cho tối đa 12 phần, trong đó biến cScale0 kiểm soát màu của phần hoặc khoảng thời gian thứ nhất, biến cScale1 kiểm soát màu của phần thứ hai, v.v. Nếu số phần vượt quá 12, bảng màu sẽ bắt đầu lặp theo chu kỳ.
Nếu bạn còn muốn thay đổi màu tiền cảnh của một phần, có thể dùng biến chủ đề tương ứng với các biến cScaleLabel0 đến cScaleLabel11 để thực hiện.
Lưu ý: giá trị mặc định của các biến chủ đề này được lấy từ chủ đề đã chọn. Nếu bạn muốn ghi đè giá trị mặc định, có thể dùng cú pháp initialize để thêm giá trị biến chủ đề tùy chỉnh.
Ví dụ:
Bây giờ hãy ghi đè giá trị mặc định của các biến cScale0 đến cScale2:
Sao chép
Nhúng
---
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
Chủ đề
Mermaid hỗ trợ nhiều chủ đề định sẵn, bạn có thể dùng chúng để chọn chủ đề phù hợp với mình. Ghi chú: bạn thực sự có thể ghi đè các biến của chủ đề hiện có để tạo chủ đề tùy chỉnh của riêng bạn.
mermaid.grammar_timeline_theme_pre_no_same
- redux-color
- redux-dark-color
- redux
- redux-dark
- default
- neutral
- dark
- forest
- neo
- neo-dark
- base
Lưu ý: để thay đổi chủ đề, bạn có thể dùng cú pháp initialize.
Chủ đề cơ sở
Sao chép
Nhúng
---
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
Chủ đề rừng
Sao chép
Nhúng
---
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
Chủ đề tối
Sao chép
Nhúng
---
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
Chủ đề mặc định
Sao chép
Nhúng
---
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
Chủ đề trung tính
Sao chép
Nhúng
---
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
