-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: mermaid.js 対応 #150
feat: mermaid.js 対応 #150
Changes from 10 commits
1f2193e
2caa5ce
3cce81b
2cc645c
97472e2
be3feac
0896fec
91d124c
a5285ef
d623064
11a6f75
ac93508
c077211
0375890
a4d0701
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -23,3 +23,192 @@ https://gist.github.com/mattpodwysocki/218388 | |
@[gist](https://gist.github.com/hofmannsven/9164408?file=my.cnf) | ||
|
||
ssfafafaffafa | ||
|
||
|
||
## mermaid.js | ||
|
||
```mermaid | ||
%%{init: { 'theme': 'forest' } }%% | ||
graph LR; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
F-->G | ||
G-->H | ||
H-->I | ||
I-->J | ||
J-->K | ||
K-->L | ||
L-->M | ||
M-->N | ||
N-->O | ||
O-->P | ||
P-->ID1[ノード1<br>ノード2] | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
### flowchart | ||
|
||
```mermaid | ||
flowchart TB | ||
c1-->a2 | ||
subgraph one | ||
a1-->a2 | ||
end | ||
subgraph two | ||
b1-->b2 | ||
end | ||
subgraph three | ||
c1-->c2 | ||
end | ||
one --> two | ||
three --> two | ||
two --> c2 | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [note] フローチャートの例 |
||
|
||
### sequence diagram | ||
|
||
```mermaid | ||
sequenceDiagram | ||
autonumber | ||
アリス->>光輝: Hello John, how are you? | ||
loop Healthcheck | ||
光輝->>光輝: Fight against hypochondria | ||
end | ||
Note right of 光輝: Rational thoughts! | ||
光輝-->>アリス: Great! | ||
光輝->>Bob: How about you? | ||
Bob-->>光輝: Jolly good! | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
### class diagram | ||
|
||
```mermaid | ||
classDiagram | ||
Animal <|-- Duck | ||
Animal <|-- Fish | ||
Animal <|-- Zebra | ||
Animal : +int age | ||
Animal : +String gender | ||
Animal: +isMammal() | ||
Animal: +mate() | ||
class Duck{ | ||
+String beakColor | ||
+swim() | ||
+quack() | ||
} | ||
class Fish{ | ||
-int sizeInFeet | ||
-canEat() | ||
} | ||
class Zebra{ | ||
+bool is_wild | ||
+run() | ||
} | ||
callback Duck callback "Tooltip" | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [note]
|
||
|
||
|
||
### state diagram | ||
|
||
```mermaid | ||
stateDiagram-v2 | ||
[*] --> Active | ||
|
||
state Active { | ||
[*] --> NumLockOff | ||
NumLockOff --> NumLockOn : EvNumLockPressed | ||
NumLockOn --> NumLockOff : EvNumLockPressed | ||
-- | ||
[*] --> CapsLockOff | ||
CapsLockOff --> CapsLockOn : EvCapsLockPressed | ||
CapsLockOn --> CapsLockOff : EvCapsLockPressed | ||
-- | ||
[*] --> ScrollLockOff | ||
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed | ||
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed | ||
|
||
} | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [note] 状態遷移図の例 |
||
|
||
|
||
|
||
```mermaid | ||
graph LR | ||
A:::someclass B | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
classDef someclass fill:#f96; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
A-->B & C-->D & E-->F & Z-->X; | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
|
||
```mermaid | ||
graph LR; | ||
A["<img src=invalid onerror=alert('XSS')></img>"] --> B; | ||
alert`md5_salt`-->B; | ||
click alert`md5_salt` eval "Tooltip for a callback" | ||
click B "javascript:alert('XSS')" "This is a tooltip for a link" | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [note]
|
||
|
||
```mermaid | ||
graph LR; | ||
alert`md5_salt`-->B; | ||
click alert`md5_salt` eval "Tooltip for a callback" | ||
click B "javascript:alert('XSS')" "This is a tooltip for a link" | ||
link Zebra "http://www.github.com" "This is a link" | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [note]
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
{ | ||
"private": true, | ||
"name": "example", | ||
"version": "0.1.82-alpha.2", | ||
"version": "0.1.82", | ||
"dependencies": { | ||
"zenn-cli": "^0.1.82-alpha.2" | ||
"zenn-cli": "^0.1.82" | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[note] サンプルを記載していますがこんなに数がいらなければ言ってください。