mermaid
11.4.0
마크다운과 유사한 텍스트에서 다이어그램을 생성합니다.
라이브 에디터!
문서 | 시작하기 | CDN | ? 우리와 함께하세요
简体中文
향후 릴리스의 라이브 편집기 미리 보기를 사용해 보십시오. 개발 | 다음
? Mermaid는 JS Open Source Awards(2019) "가장 흥미로운 기술 사용" 부문 후보에 올랐으며 수상했습니다!!!
관련된 모든 분들, 끌어오기 요청을 해주신 분들, 질문에 답변해주신 분들에게 감사드립니다!
에 대한
예
풀어 주다
관련 프로젝트
기여자
보안 및 안전 다이어그램
취약점 보고
감사
Mermaid는 Markdown에서 영감을 받은 텍스트 정의와 렌더러를 사용하여 복잡한 다이어그램을 만들고 수정하는 JavaScript 기반 다이어그램 작성 및 차트 작성 도구입니다. Mermaid의 주요 목적은 문서가 개발 과정을 따라잡을 수 있도록 돕는 것입니다.
Doc-Rot은 인어가 해결하는 데 도움이 되는 Catch-22입니다.
다이어그램 작성 및 문서화는 개발자의 귀중한 시간을 소모하며 빠르게 구식이 됩니다. 그러나 다이어그램이나 문서가 없으면 생산성이 저하되고 조직 학습이 손상됩니다.
Mermaid는 사용자가 쉽게 수정 가능한 다이어그램을 만들 수 있도록 하여 이 문제를 해결합니다. 또한 프로덕션 스크립트(및 기타 코드 조각)의 일부로 만들 수도 있습니다.
Mermaid를 사용하면 프로그래머가 아닌 사람이라도 Mermaid Live Editor를 통해 상세한 다이어그램을 쉽게 만들 수 있습니다.
비디오 튜토리얼을 보려면 튜토리얼 페이지를 방문하세요. 자주 사용하는 애플리케이션과 함께 Mermaid를 사용하고, Mermaid의 통합 및 사용 목록을 확인하세요.
GitHub 내에서 뿐만 아니라 다른 즐겨찾는 여러 애플리케이션에서도 Mermaid를 사용할 수 있습니다. 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(원형)
B --> C{결정}
C -->|하나| D[결과 1]
C -->|2| E[결과 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!
시퀀스 다이어그램
Alice->>John: 안녕 John, 잘 지내?
루프 상태 점검
존->>존: hypochondria와의 싸움
끝
John의 오른쪽 참고: 합리적인 생각!
존-->>앨리스: 좋아요!
존->>밥: 당신은 어때요?
Bob-->>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
간트
섹션 섹션
완료 : 완료, des1, 2014-01-06,2014-01-08
활성:활성, des2, 2014-01-07, 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
클래스07 : 같음()
Class07 : Object[] 요소데이터
Class01 : 크기()
Class01 : 지능 침팬지
Class01 : 정수 고릴라
클래스 클래스10 {
<<서비스>>
정수 ID
크기()
} 로드 중stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
상태 다이어그램-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
간트
제목 Git 문제 - 마지막 업데이트 이후 일수
날짜 형식 X
축 형식 %s
섹션 Issue19062
71 : 0, 71
섹션 Issue19401
36 : 0, 36
섹션 Issue193
34 : 0, 34
섹션 Issue7441
9 : 0, 9
섹션 Issue1300
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컨텍스트
제목 인터넷 뱅킹 시스템의 시스템 컨텍스트 다이어그램
Person(customerA, "은행 고객 A", "개인 은행 계좌를 가진 은행 고객.")
Person(고객B, "은행고객B")
Person_Ext(customerC, "은행고객C")
System(SystemAA, "인터넷 뱅킹 시스템", "고객이 자신의 은행 계좌 정보를 확인하고 결제할 수 있도록 합니다.")
Person(customerD, "은행 고객 D", "개인 은행 계좌를 보유한 <br/> 은행 고객.")
Enterprise_Boundary(b1, "은행경계") {
SystemDb_Ext(SystemE, "메인프레임 뱅킹 시스템", "고객, 계좌, 거래 등에 관한 모든 핵심 뱅킹 정보를 저장합니다.")
System_Boundary(b2, "BankBoundary2") {
시스템(시스템A, "뱅킹 시스템 A")
System(SystemB, "뱅킹 시스템 B", "개인 은행 계좌가 있는 은행 시스템.")
}
System_Ext(SystemC, "이메일 시스템", "내부 Microsoft Exchange 이메일 시스템.")
SystemDb(SystemD, "뱅킹 시스템 D 데이터베이스", "개인 은행 계좌가 있는 은행 시스템.")
경계(b3, "BankBoundary3", "경계") {
SystemQueue(SystemF, "뱅킹 시스템 F 큐", "개인 은행 계좌가 있는 은행 시스템.")
SystemQueue_Ext(SystemG, "뱅킹 시스템 G 대기열", "개인 은행 계좌가 있는 은행 시스템.")
}
}
BiRel(고객A, SystemAA, "사용")
BiRel(SystemAA, SystemE, "사용")
Rel(SystemAA, SystemC, "이메일 보내기", "SMTP")
Rel(SystemC, customerA, "이메일을 보내는 사람") 로드 중그렇게 할 권한이 있는 사람들의 경우:
package.json 의 버전 번호를 업데이트하세요.
npm 게시
위 명령은 dist 폴더에 파일을 생성하고 https://www.npmjs.com에 게시합니다.
명령줄 인터페이스
라이브 에디터
HTTP 서버
Mermaid는 성장하는 커뮤니티이며 항상 새로운 기여자를 받아들이고 있습니다. 도움을 드릴 수 있는 방법은 다양하며 우리는 항상 추가 인력을 찾고 있습니다! 어디서 도움을 시작해야 할지 알고 싶다면 이 문제를 살펴보세요.
기여 방법에 대한 자세한 내용은 기여 가이드에서 확인할 수 있습니다.
공개 사이트의 경우 인터넷 사용자로부터 텍스트를 검색하고 나중에 브라우저에 표시하기 위해 해당 콘텐츠를 저장하는 것이 불안정할 수 있습니다. 그 이유는 사용자 콘텐츠에 데이터가 표시될 때 실행되는 악성 스크립트가 내장되어 있을 수 있기 때문입니다. Mermaid의 경우 이는 위험합니다. 특히 인어 다이어그램에는 html에서 사용되는 많은 문자가 포함되어 있어 다이어그램이 깨져서 표준 위생을 사용할 수 없게 됩니다. 우리는 여전히 들어오는 코드를 삭제하고 프로세스를 개선하기 위해 노력하고 있지만 루프 홀이 없다고 보장하기는 어렵습니다.
외부 사용자가 있는 사이트에 대한 추가 보안 수준으로 코드의 자바스크립트가 실행되지 않도록 샌드박스 iframe에서 다이어그램이 렌더링되는 새로운 보안 수준을 도입하게 되어 기쁘게 생각합니다. 이는 더 나은 보안을 위한 큰 진전입니다.
불행하게도 케이크를 먹으면서 동시에 먹을 수는 없습니다. 이 경우 대화형 기능 중 일부가 악성 코드와 함께 차단된다는 의미입니다.
취약점을 보고하려면 문제에 대한 설명, 문제를 생성하기 위해 수행한 단계, 영향을 받는 버전, 문제에 대한 완화 방법(알려진 경우)과 함께 [email protected]로 이메일을 보내주세요.
Knut Sveidqvist의 간단한 메모:
그래픽 레이아웃과 드로잉 라이브러리를 제공한 d3 및 dagre-d3 프로젝트에 많은 감사를 드립니다!
시퀀스 다이어그램의 문법을 사용하는 js-sequence-diagram 프로젝트에도 감사드립니다. Gantt 렌더링에 대한 영감과 출발점을 주신 Jessica Peter에게 감사드립니다.
2017년 4월부터 협력해 주신 Tyler Long님께 감사드립니다.
프로젝트를 여기까지 이끌어준 점점 늘어나는 기여자 목록에 감사드립니다!
인어는 더 쉬운 문서화를 위해 Knut Sveidqvist에 의해 만들어졌습니다.
