mermaid
11.4.0
สร้างไดอะแกรมจากข้อความที่มีลักษณะคล้ายมาร์กดาวน์
บรรณาธิการสด!
เอกสารประกอบ | เริ่มต้นใช้งาน | ซีดีเอ็น | - เข้าร่วมกับเรา
简体中文
ลองใช้การแสดงตัวอย่าง Live Editor ของการเปิดตัวในอนาคต: พัฒนา | ต่อไป
- เมอร์เมดได้รับการเสนอชื่อเข้าชิงและคว้ารางวัล JS Open Source Awards (2019) ในประเภท “การใช้เทคโนโลยีที่น่าตื่นเต้นที่สุด”!!!
ขอขอบคุณผู้ที่เกี่ยวข้องทุกท่าน ผู้ที่ยื่นคำขอดึง ผู้ที่ตอบคำถาม!
เกี่ยวกับ
ตัวอย่าง
ปล่อย
โครงการที่เกี่ยวข้อง
ผู้ร่วมให้ข้อมูล
ไดอะแกรมความปลอดภัยและความปลอดภัย
การรายงานช่องโหว่
ความชื่นชม
Mermaid เป็นเครื่องมือสร้างไดอะแกรมและการสร้างแผนภูมิที่ใช้ JavaScript ซึ่งใช้คำจำกัดความข้อความที่ได้รับแรงบันดาลใจจาก Markdown และตัวเรนเดอร์เพื่อสร้างและแก้ไขไดอะแกรมที่ซับซ้อน วัตถุประสงค์หลักของ Mermaid คือการช่วยให้เอกสารสอดคล้องกับการพัฒนา
Doc-Rot เป็นเกม Catch-22 ที่นางเงือกช่วยแก้ไข
การสร้างไดอะแกรมและเอกสารประกอบทำให้นักพัฒนาเสียเวลาอันมีค่าและล้าสมัยอย่างรวดเร็ว แต่การไม่มีไดอะแกรมหรือเอกสารจะทำลายประสิทธิภาพการทำงานและส่งผลเสียต่อการเรียนรู้ขององค์กร
เมอร์เมดแก้ไขปัญหานี้ด้วยการให้ผู้ใช้สร้างไดอะแกรมที่ปรับเปลี่ยนได้ง่าย นอกจากนี้ยังสามารถเป็นส่วนหนึ่งของสคริปต์การผลิตได้ (และโค้ดอื่นๆ)
Mermaid ช่วยให้แม้แต่ผู้ที่ไม่ใช่โปรแกรมเมอร์สามารถสร้างไดอะแกรมที่มีรายละเอียดได้อย่างง่ายดายผ่าน Mermaid Live Editor
สำหรับวิดีโอบทช่วยสอน โปรดไปที่หน้าบทช่วยสอนของเรา ใช้ Mermaid กับแอพพลิเคชั่นที่คุณชื่นชอบ ตรวจสอบรายชื่อการบูรณาการและการใช้งานของ Mermaid
คุณยังสามารถใช้ Mermaid ภายใน GitHub เช่นเดียวกับแอปพลิเคชันอื่นๆ ที่คุณชื่นชอบได้ โปรดดูรายการการผสานรวมและการใช้งานของ Mermaid
สำหรับคำแนะนำโดยละเอียดเพิ่มเติมเกี่ยวกับ Mermaid และการใช้งานขั้นพื้นฐาน โปรดดูที่คู่มือสำหรับผู้เริ่มต้น การใช้งาน และบทช่วยสอน
การทดสอบการถดถอยด้วยภาพ PR ของเราขับเคลื่อนโดย Argos พร้อมแผนโอเพ่นซอร์สที่เอื้อเฟื้อ ทำให้กระบวนการตรวจสอบ PR ที่มีการเปลี่ยนแปลงภาพเป็นเรื่องง่าย
ในกระบวนการเผยแพร่ของเรา เราพึ่งพาการทดสอบการถดถอยด้วยภาพอย่างมากโดยใช้ applitools Applitools เป็นบริการที่ยอดเยี่ยมซึ่งใช้งานง่ายและผสานรวมกับการทดสอบของเรา
ต่อไปนี้เป็นตัวอย่างบางส่วนของไดอะแกรม แผนภูมิ และกราฟที่สามารถสร้างโดยใช้ Mermaid คลิกที่นี่เพื่อข้ามไปยังไวยากรณ์ข้อความ
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] ผังงาน LR
A[ยาก] -->|ข้อความ| บี(กลม)
B --> C{การตัดสินใจ}
C -->|หนึ่ง| ง[ผลลัพธ์ 1]
C -->|สอง| อ[ผลลัพธ์ 2] กำลังโหลดsequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
ลำดับไดอะแกรม
อลิซ->>จอห์น: สวัสดีจอห์น สบายดีไหม?
วน HealthCheck
จอห์น -> จอห์น: ต่อสู้กับภาวะ hypochondria
จบ
หมายเหตุด้านขวาของ John: ความคิดที่มีเหตุผล!
จอห์น-->>อลิซ: เยี่ยมมาก!
จอห์น->>บ๊อบ: แล้วคุณล่ะ?
บ๊อบ-->>จอห์น: เยี่ยมมาก! กำลังโหลดgantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d
แกนต์
มาตรา มาตรา
เสร็จสิ้น :done, des1, 2014-01-06,2014-01-08
ใช้งานอยู่ :ใช้งานอยู่, des2, 07-01-2014, 3d
ขนาน 1 : des3, หลัง des1, 1d
ขนาน 2 : des4, หลัง des1, 1d
ขนาน 3 : des5, หลัง des3, 1d
ขนานที่ 4 : des6, หลัง des4, 1d กำลังโหลดclassDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
} คลาสไดอะแกรม
Class01 <|-- AveryLongClass : เจ๋ง
<<อินเทอร์เฟซ>> Class01
Class09 --> C2 : ฉันอยู่ที่ไหน?
คลาส09 --* C3
คลาส09 --|> คลาส07
Class07 : เท่ากับ()
Class07 : วัตถุ [] elementData
Class01 : ขนาด()
Class01 : int ชิมแปนซี
Class01 : กอริลลาอินท์
คลาสคลาส10 {
<<บริการ>>
รหัสภายใน
ขนาด()
- กำลังโหลดstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> ยังคงอยู่
ยังคงอยู่ --> [*]
ยังคง --> เคลื่อนไหว
เคลื่อนไหว --> นิ่ง.
การย้าย --> ความผิดพลาด
ความผิดพลาด --> [*] กำลังโหลดpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
พาย
"สุนัข" : 386
"แมว" : 85.9
"หนู" : 15 กำลังโหลดgantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
แกนต์
title Git Issues - วันนับจากการอัปเดตครั้งล่าสุด
วันที่รูปแบบ X
axisFormat %s
มาตรา ฉบับที่ 19062
71 : 0, 71
มาตราฉบับที่ 19401
36 : 0, 36
มาตรา ฉบับที่ 193
34 : 0, 34
มาตราฉบับที่ 7441
9 : 0, 9
มาตรา ฉบับที่ 1300
5 : 0, 5 กำลังโหลดjourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
การเดินทาง
ชื่อเรื่อง วันทำงานของฉัน
ส่วนไปทำงาน
ชงชา: 5: ฉัน
ขึ้นไปชั้นบน: 3: ฉัน
ทำงาน: 1: ฉันแมว
ส่วนกลับบ้าน
ลงไปชั้นล่าง: 5: ฉัน
นั่งลง: 3: ฉัน กำลังโหลดC4Context
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to") C4บริบท
ชื่อเรื่อง แผนภาพบริบทระบบสำหรับระบบธนาคารทางอินเทอร์เน็ต
บุคคล(ลูกค้า A, "ลูกค้าธนาคาร A", "ลูกค้าของธนาคารที่มีบัญชีธนาคารส่วนบุคคล")
บุคคล(ลูกค้าB, "ลูกค้าธนาคารB")
Person_Ext(customerC, "ลูกค้าธนาคาร C")
ระบบ(SystemAA, "ระบบธนาคารทางอินเทอร์เน็ต", "อนุญาตให้ลูกค้าดูข้อมูลเกี่ยวกับบัญชีธนาคารของตนและชำระเงิน")
บุคคล(ลูกค้า D, "ลูกค้าธนาคาร D", "ลูกค้าของธนาคาร, <br/> ที่มีบัญชีธนาคารส่วนบุคคล")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "จัดเก็บข้อมูลหลักเกี่ยวกับการธนาคารทั้งหมดเกี่ยวกับลูกค้า บัญชี ธุรกรรม ฯลฯ")
System_Boundary(b2, "BankBoundary2") {
ระบบ(SystemA, "ระบบธนาคาร A")
ระบบ(SystemB, "ระบบธนาคาร B", "ระบบของธนาคารพร้อมบัญชีธนาคารส่วนบุคคล")
-
System_Ext(SystemC, "ระบบอีเมล", "ระบบอีเมล Microsoft Exchange ภายใน")
SystemDb(SystemD, "ฐานข้อมูลระบบธนาคาร D", "ระบบของธนาคารพร้อมบัญชีธนาคารส่วนบุคคล")
ขอบเขต(b3, "BankBoundary3", "ขอบเขต") {
SystemQueue(SystemF, "Banking System F Queue", "ระบบของธนาคารพร้อมบัญชีธนาคารส่วนบุคคล")
SystemQueue_Ext(SystemG, "Banking System G Queue", "ระบบของธนาคารพร้อมบัญชีธนาคารส่วนบุคคล")
-
-
BiRel (ลูกค้า A, SystemAA, "การใช้งาน")
BiRel(SystemAA, SystemE, "การใช้งาน")
Rel(SystemAA, SystemC, "ส่งอีเมล", "SMTP")
Rel(SystemC, ลูกค้าA, "ส่งอีเมลไปที่") กำลังโหลดสำหรับผู้ที่ได้รับอนุญาตให้ดำเนินการดังกล่าว:
อัปเดตหมายเลขเวอร์ชันใน package.json
เวลา 13.00 น. เผยแพร่
คำสั่งดังกล่าวจะสร้างไฟล์ลงในโฟลเดอร์ dist และเผยแพร่ไปที่ https://www.npmjs.com
อินเทอร์เฟซบรรทัดคำสั่ง
บรรณาธิการสด
เซิร์ฟเวอร์ HTTP
เมอร์เมดเป็นชุมชนที่กำลังเติบโตและเปิดรับผู้ร่วมให้ข้อมูลใหม่ๆ อยู่เสมอ มีหลายวิธีที่จะช่วยเหลือ และเรามองหามือพิเศษอยู่เสมอ! ดูปัญหานี้หากคุณต้องการทราบว่าจะเริ่มช่วยเหลือได้ที่ไหน
ข้อมูลโดยละเอียดเกี่ยวกับวิธีการบริจาคสามารถพบได้ในคู่มือการบริจาค
สำหรับไซต์สาธารณะ อาจเป็นเรื่องที่ไม่ปลอดภัยในการดึงข้อความจากผู้ใช้บนอินเทอร์เน็ต และจัดเก็บเนื้อหานั้นเพื่อการนำเสนอในเบราว์เซอร์ในภายหลัง เหตุผลก็คือเนื้อหาของผู้ใช้อาจมีสคริปต์ที่เป็นอันตรายฝังอยู่ซึ่งจะทำงานเมื่อมีการนำเสนอข้อมูล สำหรับเมอร์เมด นี่เป็นความเสี่ยง โดยเฉพาะอย่างยิ่งเนื่องจากไดอะแกรมนางเงือกมีอักขระหลายตัวที่ใช้ใน html ซึ่งทำให้การสุขาภิบาลมาตรฐานใช้งานไม่ได้เนื่องจากทำให้ไดอะแกรมเสียหายด้วย เรายังคงพยายามฆ่าเชื้อโค้ดที่เข้ามาและปรับแต่งกระบวนการต่อไป แต่ก็ยากที่จะรับประกันได้ว่าจะไม่มีช่องโหว่
เพื่อเป็นระดับการรักษาความปลอดภัยเพิ่มเติมสำหรับไซต์ที่มีผู้ใช้ภายนอก เรายินดีที่จะแนะนำระดับความปลอดภัยใหม่ โดยที่ไดอะแกรมถูกแสดงผลใน iframe แบบแซนด์บ็อกซ์ ป้องกันไม่ให้จาวาสคริปต์ในโค้ดถูกเรียกใช้งาน นี่เป็นก้าวสำคัญสำหรับการรักษาความปลอดภัยที่ดีขึ้น
น่าเสียดายที่คุณไม่สามารถกินเค้กและกินมันในเวลาเดียวกันได้ ซึ่งในกรณีนี้หมายความว่าฟังก์ชันโต้ตอบบางอย่างจะถูกบล็อกพร้อมกับโค้ดที่เป็นอันตรายที่อาจเกิดขึ้น
หากต้องการรายงานช่องโหว่ โปรดส่งอีเมลไปที่ [email protected] พร้อมคำอธิบายปัญหา ขั้นตอนที่คุณดำเนินการเพื่อสร้างปัญหา เวอร์ชันที่ได้รับผลกระทบ และหากทราบ การบรรเทาปัญหา
ข้อความสั้นๆ จาก Knut Sveidqvist:
ขอบคุณมากสำหรับโปรเจ็กต์ d3 และ dagre-d3 ที่ให้บริการเลย์เอาต์กราฟิกและไลบรารี่การวาด!
ขอขอบคุณโครงการ js-sequence-diagram สำหรับการใช้งานไวยากรณ์สำหรับไดอะแกรมลำดับ ขอขอบคุณเจสสิก้า ปีเตอร์สำหรับแรงบันดาลใจและจุดเริ่มต้นสำหรับการเรนเดอร์แกนต์
ขอขอบคุณ Tyler Long ที่เป็นผู้ร่วมงานตั้งแต่เดือนเมษายน 2017
ขอขอบคุณรายชื่อผู้ร่วมให้ข้อมูลที่เพิ่มมากขึ้นเรื่อยๆ ซึ่งนำโครงการมาได้ไกลถึงขนาดนี้!
Mermaid ถูกสร้างขึ้นโดย Knut Sveidqvist เพื่อให้จัดทำเอกสารได้ง่ายขึ้น
