Revisions rev20
- 今回は、お試し実装しているβ機能についてです。
esa では、[Plant UMLでのUML記法](https://docs.esa.io/posts/196)の他にも[mermaid](https://mermaidjs.github.io/)にも対応しております。現在は、`Version: 10.2.0`に対応しております :bee: `mermaid`は当初ガントチャートが描けることがユニークな点でしたが、PlantUMLでもガントチャートが描けるようなので、見た目や記法の好みで好きな方を選択するのがヨサソウです。- esa では、[Plant UMLでのUML記法](https://docs.esa.io/posts/196)の他にも[mermaid](https://mermaidjs.github.io/)にも対応しております。現在は、`Version: 10.2.3`に対応しております :bee: `mermaid`は当初ガントチャートが描けることがユニークな点でしたが、PlantUMLでもガントチャートが描けるようなので、見た目や記法の好みで好きな方を選択するのがヨサソウです。
- esa で記事を書く際の表現の幅が広がりますので、ぜひお試し下さい :esa2:
- ※ mermaid 記法のサポート、サポートされる mermaid のバージョンは今後変更される可能性があります。
- ※ mermaid のバージョンアップにより、記法が変更になることがあります。ご了承下さい。
- ## ガントチャートの例
- ```mermaid
- gantt
- title A Gantt Diagram
- dateFormat YYYY-MM-DD
- section Section
- A task :a1, 2014-01-01, 30d
- Another task :after a1 , 20d
- section Another
- Task in sec :2014-01-12 , 12d
- another task : 24d
- ```
- ```mermaid
- gantt
- title A Gantt Diagram
- dateFormat YYYY-MM-DD
- section Section
- A task :a1, 2014-01-01, 30d
- Another task :after a1 , 20d
- section Another
- Task in sec :2014-01-12 , 12d
- another task : 24d
- ```
- ```mermaid
- gantt
- dateFormat YYYY-MM-DD
- title Adding GANTT diagram functionality to mermaid
- section A section
- Completed task :done, des1, 2014-01-06,2014-01-08
- Active task :active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page :20h
- Add another diagram to demo page :48h
- ```
- ```mermaid
- gantt
- dateFormat YYYY-MM-DD
- title Adding GANTT diagram functionality to mermaid
- section A section
- Completed task :done, des1, 2014-01-06,2014-01-08
- Active task :active, des2, 2014-01-09, 3d
- Future task : des3, after des2, 5d
- Future task2 : des4, after des3, 5d
- section Critical tasks
- Completed task in the critical line :crit, done, 2014-01-06,24h
- Implement parser and jison :crit, done, after des1, 2d
- Create tests for parser :crit, active, 3d
- Future task in critical line :crit, 5d
- Create tests for renderer :2d
- Add to mermaid :1d
- section Documentation
- Describe gantt syntax :active, a1, after des1, 3d
- Add gantt diagram to demo page :after a1 , 20h
- Add another diagram to demo page :doc1, after a1 , 48h
- section Last section
- Describe gantt syntax :after doc1, 3d
- Add gantt diagram to demo page :20h
- Add another diagram to demo page :48h
- ```
- ガントチャートの詳しい記法は[こちら](https://mermaid.js.org/syntax/gantt.html)をご確認ください。
- ## フローチャートの例
- ```mermaid
- graph TD;
- A-->B;
- A-->C;
- B-->D;
- C-->D;
- ```
- ```mermaid
- graph TD;
- A-->B;
- A-->C;
- B-->D;
- C-->D;
- ```
- フローチャートの詳しい記法は[こちら](https://mermaid.js.org/syntax/flowchart.html)をご確認ください。
- ## シーケンス図の例
- ```mermaid
- sequenceDiagram
- Alice->>John: Hello John, how are you?
- John-->>Alice: Great!
- ```
- ```mermaid
- sequenceDiagram
- Alice->>John: Hello John, how are you?
- John-->>Alice: Great!
- ```
- シーケンス図の詳しい記法は[こちら](https://mermaid.js.org/syntax/sequenceDiagram.html)をご確認ください。
- ## クラス図
- ```mermaid
- ---
- title: Animal example
- ---
- classDiagram
- note "From Duck till Zebra"
- Animal <|-- Duck
- note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
- 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()
- }
- ```
- ```mermaid
- ---
- title: Animal example
- ---
- classDiagram
- note "From Duck till Zebra"
- Animal <|-- Duck
- note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
- 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()
- }
- ```
- クラス図の詳しい記法は[こちら](https://mermaid.js.org/syntax/classDiagram.html)をご確認ください。
- ## 状態遷移図
- ```mermaid
- ---
- title: Simple sample
- ---
- stateDiagram-v2
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
- ```
- ```mermaid
- ---
- title: Simple sample
- ---
- stateDiagram-v2
- [*] --> Still
- Still --> [*]
- Still --> Moving
- Moving --> Still
- Moving --> Crash
- Crash --> [*]
- ```
- 状態遷移図の詳しい記法は[こちら](https://mermaid.js.org/syntax/stateDiagram.html)をご確認ください。
- ## ER図
- ```mermaid
- ---
- title: Order example
- ---
- erDiagram
- CUSTOMER ||--o{ ORDER : places
- ORDER ||--|{ LINE-ITEM : contains
- CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
- ```
- ```mermaid
- ---
- title: Order example
- ---
- erDiagram
- CUSTOMER ||--o{ ORDER : places
- ORDER ||--|{ LINE-ITEM : contains
- CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
- ```
- ER図の詳しい記法は[こちら](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)をご確認ください。
- ## ユーザージャーニーマップ
- ```mermaid
- 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: 5: Me
- ```
- ```mermaid
- 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: 5: Me
- ```
- ユーザージャーにマップの詳しい記法は[こちら](https://mermaid.js.org/syntax/userJourney.html)をご確認ください。
- ## mermaid 記法やその他の記法について
- - https://docs.esa.io/posts/49#Mermaid こちらもご覧ください
- # 所感
- <video controls width="480" alt="IMG_5830.m4v (3.1 MB)" src="https://esa-storage-tokyo.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/105/2019/01/24/11/cc3f727f-bdbe-4a8a-af5d-dcbd6601b695.m4v"></video>
- 先日、移転祝いに鳩時計を頂きました :bird: ありがとうございます :tada:
- ```mermaid
- graph TD;
- 時報-->|長針が0分を指す| 時刻の数だけ鳴く;
- 時報-->|長針が30分を指す| 1度だけ鳴く;
- ```
- ---
- Enjoy "(\\( ⁰⊖⁰)/)"
- https://esa.io
今回は、お試し実装しているβ機能についてです。
esa では、Plant UMLでのUML記法の他にもmermaidにも対応しております。現在は、Version: に対応しております 10.2.010.2.3
mermaidは当初ガントチャートが描けることがユニークな点でしたが、PlantUMLでもガントチャートが描けるようなので、見た目や記法の好みで好きな方を選択するのがヨサソウです。
esa で記事を書く際の表現の幅が広がりますので、ぜひお試し下さい 
※ mermaid 記法のサポート、サポートされる mermaid のバージョンは今後変更される可能性があります。
※ mermaid のバージョンアップにより、記法が変更になることがあります。ご了承下さい。
> ガントチャートの例ガントチャートの例
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
ガントチャートの詳しい記法はこちらをご確認ください。
> フローチャートの例フローチャートの例
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
フローチャートの詳しい記法はこちらをご確認ください。
> シーケンス図の例シーケンス図の例
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
シーケンス図の詳しい記法はこちらをご確認ください。
> クラス図クラス図
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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()
}
```
クラス図の詳しい記法はこちらをご確認ください。
> 状態遷移図状態遷移図
```mermaid
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
状態遷移図の詳しい記法はこちらをご確認ください。
> ER図ER図
```mermaid
---
title: Order example
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
ER図の詳しい記法はこちらをご確認ください。
> ユーザージャーニーマップユーザージャーニーマップ
```mermaid
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: 5: Me
```
ユーザージャーにマップの詳しい記法はこちらをご確認ください。
> mermaid 記法やその他の記法についてmermaid 記法やその他の記法について
- https://docs.esa.io/posts/49#Mermaid こちらもご覧ください
> 所感所感
先日、移転祝いに鳩時計を頂きました 
ありがとうございます 
Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io
今回は、お試し実装しているβ機能についてです。
esa では、[Plant UMLでのUML記法](https://docs.esa.io/posts/196)の他にも[mermaid](https://mermaidjs.github.io/)にも対応しております。現在は、`Version: 10.2.3`に対応しております :bee: `mermaid`は当初ガントチャートが描けることがユニークな点でしたが、PlantUMLでもガントチャートが描けるようなので、見た目や記法の好みで好きな方を選択するのがヨサソウです。
esa で記事を書く際の表現の幅が広がりますので、ぜひお試し下さい :esa2:
※ mermaid 記法のサポート、サポートされる mermaid のバージョンは今後変更される可能性があります。
※ mermaid のバージョンアップにより、記法が変更になることがあります。ご了承下さい。
## ガントチャートの例
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
ガントチャートの詳しい記法は[こちら](https://mermaid.js.org/syntax/gantt.html)をご確認ください。
## フローチャートの例
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
フローチャートの詳しい記法は[こちら](https://mermaid.js.org/syntax/flowchart.html)をご確認ください。
## シーケンス図の例
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
シーケンス図の詳しい記法は[こちら](https://mermaid.js.org/syntax/sequenceDiagram.html)をご確認ください。
## クラス図
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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()
}
```
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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()
}
```
クラス図の詳しい記法は[こちら](https://mermaid.js.org/syntax/classDiagram.html)をご確認ください。
## 状態遷移図
```mermaid
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
```mermaid
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
状態遷移図の詳しい記法は[こちら](https://mermaid.js.org/syntax/stateDiagram.html)をご確認ください。
## ER図
```mermaid
---
title: Order example
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
---
title: Order example
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
ER図の詳しい記法は[こちら](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)をご確認ください。
## ユーザージャーニーマップ
```mermaid
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: 5: Me
```
```mermaid
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: 5: Me
```
ユーザージャーにマップの詳しい記法は[こちら](https://mermaid.js.org/syntax/userJourney.html)をご確認ください。
## mermaid 記法やその他の記法について
- https://docs.esa.io/posts/49#Mermaid こちらもご覧ください
# 所感
<video controls width="480" alt="IMG_5830.m4v (3.1 MB)" src="https://esa-storage-tokyo.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/105/2019/01/24/11/cc3f727f-bdbe-4a8a-af5d-dcbd6601b695.m4v"></video>
先日、移転祝いに鳩時計を頂きました :bird: ありがとうございます :tada:
```mermaid
graph TD;
時報-->|長針が0分を指す| 時刻の数だけ鳴く;
時報-->|長針が30分を指す| 1度だけ鳴く;
```
---
Enjoy "(\\( ⁰⊖⁰)/)"
https://esa.io
今回は、お試し実装しているβ機能についてです。
esa では、Plant UMLでのUML記法の他にもmermaidにも対応しております。現在は、Version: 10.2.3に対応しております mermaidは当初ガントチャートが描けることがユニークな点でしたが、PlantUMLでもガントチャートが描けるようなので、見た目や記法の好みで好きな方を選択するのがヨサソウです。
esa で記事を書く際の表現の幅が広がりますので、ぜひお試し下さい
※ mermaid 記法のサポート、サポートされる mermaid のバージョンは今後変更される可能性があります。
※ mermaid のバージョンアップにより、記法が変更になることがあります。ご了承下さい。
> ガントチャートの例ガントチャートの例
```mermaid
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
ガントチャートの詳しい記法はこちらをご確認ください。
> フローチャートの例フローチャートの例
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
フローチャートの詳しい記法はこちらをご確認ください。
> シーケンス図の例シーケンス図の例
```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
```
シーケンス図の詳しい記法はこちらをご確認ください。
> クラス図クラス図
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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()
}
```
クラス図の詳しい記法はこちらをご確認ください。
> 状態遷移図状態遷移図
```mermaid
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```
状態遷移図の詳しい記法はこちらをご確認ください。
> ER図ER図
```mermaid
---
title: Order example
---
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
ER図の詳しい記法はこちらをご確認ください。
> ユーザージャーニーマップユーザージャーニーマップ
```mermaid
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: 5: Me
```
ユーザージャーにマップの詳しい記法はこちらをご確認ください。
> mermaid 記法やその他の記法についてmermaid 記法やその他の記法について
- https://docs.esa.io/posts/49#Mermaid こちらもご覧ください
> 所感所感
先日、移転祝いに鳩時計を頂きました ありがとうございます
Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io
