mermaid
11.4.0
Hasilkan diagram dari teks seperti penurunan harga.
Editor Langsung!
Dokumentasi | Memulai | CDN | ? Bergabunglah dengan Kami
简体中文
Coba pratinjau Live Editor untuk rilis mendatang: Kembangkan | Berikutnya
? Mermaid masuk nominasi dan memenangkan JS Open Source Awards (2019) dalam kategori "Penggunaan teknologi paling menarik"!!!
Terima kasih kepada semua yang terlibat, orang-orang yang melakukan permintaan tarik, orang-orang yang menjawab pertanyaan!
Tentang
Contoh
Melepaskan
Proyek terkait
Kontributor
Diagram keamanan dan keselamatan
Melaporkan kerentanan
Apresiasi
Mermaid adalah alat pembuatan diagram dan pembuatan bagan berbasis JavaScript yang menggunakan definisi teks yang terinspirasi dari penurunan harga dan penyaji untuk membuat dan memodifikasi diagram yang kompleks. Tujuan utama Mermaid adalah membantu dokumentasi mengejar perkembangan.
Doc-Rot adalah Catch-22 yang dibantu oleh Mermaid untuk dipecahkan.
Pembuatan diagram dan dokumentasi menghabiskan waktu pengembang yang berharga dan cepat ketinggalan zaman. Namun tidak adanya diagram atau dokumen akan merusak produktivitas dan merugikan pembelajaran organisasi.
Mermaid mengatasi masalah ini dengan memungkinkan pengguna membuat diagram yang mudah dimodifikasi. Itu juga dapat dijadikan bagian dari skrip produksi (dan potongan kode lainnya).
Mermaid bahkan memungkinkan non-programmer untuk dengan mudah membuat diagram detail melalui Mermaid Live Editor.
Untuk tutorial video, kunjungi halaman Tutorial kami. Gunakan Mermaid dengan aplikasi favorit Anda, lihat daftar Integrasi dan Penggunaan Mermaid.
Anda juga dapat menggunakan Mermaid dalam GitHub serta banyak aplikasi favorit Anda lainnya—lihat daftar Integrasi dan Penggunaan Mermaid.
Untuk pengenalan lebih rinci tentang Mermaid dan beberapa kegunaannya yang lebih mendasar, lihat Panduan Pemula, Penggunaan dan Tutorial.
Pengujian Regresi Visual PR kami didukung oleh Argos dengan paket Open Source mereka yang murah hati. Ini membuat proses review PR dengan perubahan visual menjadi mudah.
Dalam proses rilis, kami sangat mengandalkan pengujian regresi visual menggunakan applitools. Applitools adalah layanan hebat yang mudah digunakan dan diintegrasikan dengan pengujian kami.
Berikut ini adalah beberapa contoh diagram, bagan dan grafik yang dapat dibuat dengan menggunakan Mermaid. Klik di sini untuk melompat ke sintaks teks.
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2] diagram alur LR
A[Keras] -->|Teks| B (Bulat)
B --> C{Keputusan}
C -->|Satu| D[Hasil 1]
C -->|Dua| E[Hasil 2] MemuatsequenceDiagram 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!
diagram urutan
Alice->>John: Halo John, apa kabar?
lingkaran Pemeriksaan Kesehatan
John->>John: Melawan hipokondria
akhir
Catatan di sebelah kanan John: Pemikiran rasional!
John-->>Alice: Hebat!
John->>Bob: Bagaimana denganmu?
Bob-->>John: Bagus sekali! Memuatgantt 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
gantt
bagian Bagian
Selesai :selesai, des1, 06-01-2014, 08-01-2014
Aktif :aktif, des2, 07-01-2014, 3d
Paralel 1 : des3, setelah des1, 1d
Paralel 2 : des4, setelah des1, 1d
Paralel 3 : des5, setelah des3, 1d
Paralel 4 : des6, setelah des4, 1d MemuatclassDiagram
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()
} diagram kelas
Class01 <|-- AveryLongClass : Keren
<<Antarmuka>> Kelas01
Kelas09 --> C2 : Dimana aku?
Kelas09 --* C3
Kelas09 --|> Kelas07
Kelas07 : sama dengan()
Kelas07 : Objek[] elementData
Kelas01 : ukuran()
Kelas01 : int simpanse
Kelas01 : ke dalam gorila
kelas Kelas 10 {
<<layanan>>
ke dalam identitas
ukuran()
} MemuatstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> Tetap saja
Masih --> [*]
Diam -> Bergerak
Bergerak --> Diam
Bergerak -> Kecelakaan
Kecelakaan --> [*] Memuatpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
pai
"Anjing" : 386
"Kucing" : 85.9
"Tikus" : 15 Memuatgantt 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
gantt
title Git Issues - hari sejak pembaruan terakhir
format tanggal X
sumbuFormat %s
bagian Edisi19062
71 : 0, 71
bagian Edisi19401
36 : 0, 36
bagian Edisi193
34 : 0, 34
bagian Edisi7441
9 : 0, 9
bagian Edisi 1300
5 : 0, 5 Memuatjourney 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
perjalanan
judul Hari kerja saya
bagian Pergi bekerja
Membuat teh: 5: Saya
Naik ke atas: 3: Saya
Lakukan pekerjaan: 1: Saya, Kucing
bagian Pulanglah
Turun ke bawah: 5: Saya
Duduk: 3: Saya MemuatC4Context
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") Konteks C4
judul Diagram Konteks Sistem untuk Sistem Internet Banking
Orang(pelangganA, "Pelanggan Perbankan A", "Pelanggan bank, dengan rekening bank pribadi.")
Orang(pelangganB, "Pelanggan Perbankan B")
Person_Ext(pelangganC, "Pelanggan Perbankan C")
Sistem(SystemAA, "Sistem Perbankan Internet", "Memungkinkan pelanggan melihat informasi tentang rekening bank mereka, dan melakukan pembayaran.")
Orang(pelangganD, "Pelanggan Perbankan D", "Pelanggan bank, <br/> dengan rekening bank pribadi.")
Batas_Perusahaan(b1, "Batas Bank") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Menyimpan semua informasi inti perbankan tentang pelanggan, rekening, transaksi, dll.")
Batas_Sistem(b2, "Batas Bank2") {
Sistem(SistemA, "Sistem Perbankan A")
Sistem(SistemB, "Sistem Perbankan B", "Sistem bank, dengan rekening bank pribadi.")
}
System_Ext(SystemC, "Sistem email", "Sistem email internal Microsoft Exchange.")
SystemDb(SystemD, "Database Sistem D Perbankan", "Sistem bank, dengan rekening bank pribadi.")
Batas(b3, "Batas Bank3", "batas") {
SystemQueue(SystemF, "Antrian Sistem Perbankan F", "Sistem bank, dengan rekening bank pribadi.")
SystemQueue_Ext(SystemG, "Sistem Perbankan G Queue", "Sistem bank, dengan rekening bank pribadi.")
}
}
BiRel(pelangganA, SystemAA, "Penggunaan")
BiRel(SystemAA, SystemE, "Penggunaan")
Rel(SystemAA, SystemC, "Mengirim email", "SMTP")
Rel(SystemC, pelangganA, "Mengirim email ke") MemuatBagi mereka yang memiliki izin untuk melakukannya:
Perbarui nomor versi di package.json .
npm terbitkan
Perintah di atas menghasilkan file ke dalam folder dist dan mempublikasikannya ke https://www.npmjs.com.
Antarmuka Baris Perintah
Editor Langsung
Server HTTP
Mermaid adalah komunitas yang berkembang dan selalu menerima kontributor baru. Ada banyak cara berbeda untuk membantu dan kami selalu mencari bantuan tambahan! Lihatlah masalah ini jika Anda ingin tahu di mana harus mulai membantu.
Informasi terperinci tentang cara berkontribusi dapat ditemukan di panduan kontribusi
Untuk situs publik, mengambil teks dari pengguna di internet bisa jadi sulit, dan menyimpan konten tersebut untuk presentasi di browser pada tahap selanjutnya. Alasannya adalah konten pengguna mungkin berisi skrip berbahaya yang tertanam yang akan dijalankan saat data disajikan. Bagi Mermaid, hal ini beresiko, khususnya karena diagram putri duyung mengandung banyak karakter yang digunakan dalam html sehingga membuat sanitasi standar tidak dapat digunakan karena juga merusak diagram. Kami masih berupaya untuk membersihkan kode yang masuk dan terus menyempurnakan prosesnya, namun sulit untuk menjamin bahwa tidak ada lubang loop.
Sebagai tingkat keamanan ekstra untuk situs dengan pengguna eksternal, kami dengan senang hati memperkenalkan tingkat keamanan baru di mana diagram dirender dalam iframe kotak pasir yang mencegah eksekusi javascript dalam kode. Ini adalah langkah maju yang bagus untuk keamanan yang lebih baik.
Sayangnya Anda tidak dapat menikmati kue dan memakannya secara bersamaan, yang dalam hal ini berarti beberapa fungsi interaktif diblokir bersama dengan kemungkinan kode berbahaya.
Untuk melaporkan kerentanan, silakan kirim email ke [email protected] dengan deskripsi masalah, langkah-langkah yang Anda ambil untuk membuat masalah, versi yang terpengaruh, dan jika diketahui, mitigasi untuk masalah tersebut.
Catatan singkat dari Knut Sveidqvist:
Terima kasih banyak kepada proyek d3 dan dagre-d3 yang menyediakan tata letak grafis dan perpustakaan gambar!
Terima kasih juga kepada proyek js-sequence-diagram untuk penggunaan tata bahasa untuk diagram urutan. Terima kasih kepada Jessica Peter atas inspirasi dan titik awal rendering gantt.
Terima kasih kepada Tyler Long yang telah menjadi kolaborator sejak April 2017.
Terima kasih kepada daftar kontributor yang terus bertambah yang telah membawa proyek ini sejauh ini!
Mermaid diciptakan oleh Knut Sveidqvist untuk memudahkan dokumentasi.
