mermaidのREADMEを日本語訳した

[mermaid.jsのGitHub](https://github.com/mermaid-js/mermaid)を見てみたら[README.md](https://github.com/mermaid-js/mermaid/blob/v10.0.2/README.md)と[README.zh-CN.md](https://github.com/mermaid-js/mermaid/blob/v10.0.2/README.zh-CN.md)は存在するのに`README.ja-JP.md`がなかったので[作った](https://github.com/NurseAngel/mermaid/blob/translate-japanese/README.ja-JP.md)という話です。

# Mermaid

マークダウンっぽいテキストからダイアグラムを作ることができるよ。

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/648c14bc-b897-26c1-6c10-a6e26bad84b1.png)


🏆 [JS Open Source Awards 2019](https://osawards.com/javascript/2019)の、"最もエキサイティングな技術の使い方"部門をMermaidが受賞しました！！！
関係者、コミッター、回答者の皆さまに感謝します！ 🙏

## これはなに？

MermaidはJavaScript製のダイアグラム・チャート作成ツールです。
Markdownに着想を得たテキスト定義から、複雑なダイアグラムを生成・編集することが可能です。

> Doc-Rot is a Catch-22 that Mermaid helps to solve.

ダイアグラムやドキュメントは開発者の貴重な時間を奪い続けており、しかもすぐに陳腐化します。
しかしダイアグラムもドキュメントもないプロジェクトは生産性も低くなり、プロジェクトの習熟にも支障をきたします。
Mermaidは、ユーザが容易に生成・編集できるダイアグラムを提供することで、この問題を改善します。
直接プロダクションコードに含めることも可能です。

[Mermaid Live Editor](https://mermaid.live/)を使うと、ノンプログラマーでも容易に詳細なダイアグラムを作成することができます。
[チュートリアル](https://github.com/mermaid-js/mermaid/blob/develop/docs/config/Tutorials.md)では動画のチュートリアルも紹介しています。
お気に入りのアプリケーションと一緒にMermaidを使いたいなら、[Integrations and Usages of Mermaid](https://github.com/mermaid-js/mermaid/blob/develop/docs/ecosystem/integrations.md)を参照してください。

Mermaidは、なんと[GitHubの中](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)でも使うことができます。
使い方は[Integrations and Usages of Mermaid](https://github.com/mermaid-js/mermaid/blob/develop/docs/ecosystem/integrations.md)を参照してください。

Mermaidの基本的な使い方、詳細な使い方を知りたい方は、[初心者向けガイド](https://github.com/mermaid-js/mermaid/blob/develop/docs/community/n00b-overview.md)、[利用方法](https://github.com/mermaid-js/mermaid/blob/develop/docs/config/usage.md)、[チュートリアル](https://github.com/mermaid-js/mermaid/blob/develop/docs/config/Tutorials.md)などをご覧ください。

我々のリリースプロセスでは、[applitools](https://applitools.com/)を使った視覚的なリグレッションテストを導入しています。
applitoolsは使いやすく、我々のテストと統合しやすい素晴らしいツールです。


## 例

実際にMermaidを使って作成できる図表やグラフの例を紹介します。
文法は[こちら](https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference)で確認できます。

### フローチャート [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/flowchart) [ライブエディタ](https://mermaid.live/edit#pako:eNpNkMtqwzAQRX9FzKqFJK7t1km8KDQP6KJQSLOLvZhIY1tgS0GWmgbb_165IaFaiXvOFTPqgGtBkEJR6zOv0Fj2scsU8-ft8I5G5Gw6fe339GN7tnrYaafE45WvRsLW3Ya4bKVWwzVe_xU-FfVsc9hR62rLwvw_2591z7Y3FuUwgYZMg1L4ObrRzMBW1FAGqb8KKtCLGWRq8Ko7CbS0FdJqA2mBdUsTQGf110VxSK1xdJM2EkuDzd2qNQrypQ7s5TQuXcrW-ie5VoUsx9yZ2seVtac2DYIRz0ppK3eccd0ErRTjD1XfyyRIomSBUUzJPMaXOBb8GC4XRfQcFmL-FEYIwzD8AggvcHE) ]

```text
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

```mermaid
flowchart LR

A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

### シーケンス図 [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/sequenceDiagram) [ライブエディタ](https://mermaid.live/edit#pako:eNo9kMluwjAQhl_F-AykQMuSA1WrbuLQQ3v1ZbAnsVXHkzrjVhHi3etQwKfRv4w-z0FqMihL2eF3wqDxyUEdoVHhwTuNk-12RzaU4g29JzHMY2HpV0BE0VO6V8ETtdkGz1Zb1F8qiPyG5LX84mrLAmpwoWNh-5a0pWCiAxUwGBXeiVHEU4oq8V_6AHYUwAu2lLLTjVQ4bc1rT2yleI0IfJG320faZ9ABbk-Jz3hZnFxBduR9L2oiM5Jj2WBswJn8-cMArSRbbFDJMo8GK0ielVThmKOpNcD4bBxTlGUFvsOxhMT02QctS44JL6HzAS-iJzCYOwfJfTscunYd542aQuXqQU_RZ9kyt11ZFIM9rR3btJ9qaorOGQuR7c9mWSznyzXMF7hcLeBusTB6P9usq_ntrDKrm9kc5PF4_AMJE56Z) ]

```text
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!
```

```mermaid
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!
```


### ガントチャート [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/gantt) [ライブエディタ](https://mermaid.live/edit#pako:eNp90cGOgyAQBuBXIZxtFbG29bbZ3fsmvXKZylhJEAyOTZrGd1_sto3xsHMBhu-HBO689hp5xS_giJQbsCbjHTv9jcp9-q63SKhZpb3DhMXSOIiE5ZkoNpnYZGXynh6U-4jBK7JnVfBYJo9QvgjtEya1cj8QwFq0TMz4lZqxTBg0hOF5m1jifI2Lf7Bc490CyxUu1rhc4GLGPOEdhg6Mjq92V44xxanFDhWv4lRjA6MlxZWbIh17DYTf2pAPvGrADphwGMmfbq7mFYURX-jLwCVA91bWg8YYunO69Y8vMgPFI2vvGnOZ-2Owsd0S9UOVpvP29mKoHc_b2nfpYHQLgdrrsUzLvDxALrHcS9hJqeuzOB6avBCN3mciBz5N0y_wxZ0J) ]


```text
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
```

```mermaid
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
```

### クラス図 [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/classDiagram) [ライブエディタ](https://mermaid.live/edit#pako:eNpdkTFPwzAQhf-K5QlQ2zQJJG1UBaGWDYmBgYEwXO1LYuTEwXYqlZL_jt02asXm--690zvfgTLFkWaUSTBmI6DS0BTt2lfzkKx-p1PytEO9f1FtdaQkI2ulZNGuVqK1qEtgmOfk7BitSzKdOhg59XuNGgk0RDxed-_IOr6uf8cZ6UhTZ8bvHqS5ub1mr9svZPbjk6DEBlu7AQuXyBkx4gcvDk9cUMJq0XT_YaW0kNK5j-ufAoRzcihaQvLcoN4Jv50vvVxw_xrnD3RCG9QNCO4-8OgpqK1dpoJm7smxhF7agp6kfcfB4jMXVmmalW4tnFDorXrbt4xmVvc4is53GKFUwNF5DtTuO3-sShjrJjLVlqLyvNfS4drazmRB4NuzSti6386YagIjeA3a1rtlEiRRsoAoxiSN4SGOOduGy0UZ3YclT-dhBHQYhj8dc6_I) ]

```text
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()
}
```

```mermaid
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()
}
```


### 状態遷移図 [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/stateDiagram) [ライブエディタ](https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk) ]

```text
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

### 円グラフ [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/pie) [ライブエディタ](https://mermaid.live/edit#pako:eNo9jsFugzAMhl8F-VzBgEEh13Uv0F1zcYkTIpEEBadShXj3BU3dzf_n77e8wxQUgYDVkvQSbsFsEgpRtEN_5i_kvzx05XiC-xvUHVzAUXRoVe7v0heFBJ7JkQSRR0Ua08ISpD-ymlaFTN_KcoggNC4bXQATh5-Xn0BwTPSWbhZNRPdvLQEV5dIO_FrPZ43dOJ-cgtfWnDzFJeOZed1EVZ3r0lie06Ocgqs2q2aMPD_HvuqbfsCmpf7aYte2anrU46Cbz1qr60fdIBzH8QvW9lkl) ]

```text
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
```

```mermaid
pie
"Dogs" : 386
"Cats" : 85.9
"Rats" : 15
```

### Gitグラフ [ 開発中 [ライブエディタ](https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ) ]


### カスタマージャーニーマップ [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/user-journey) [ライブエディタ](https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho) ]

```text
  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
```

```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: 3: Me
```

### C4モデル [ [ドキュメント](https://mermaid-js.github.io/mermaid/#/c4c) ]

```text
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")
```

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26088/6741e8a1-8141-3720-7f83-cff999d97a26.png)

## リリース

`package.json`のバージョンを更新する。

```
npm publish
```

`dist`フォルダにファイルを生成し、`npmjs.org`に公開するコマンドです。


## 関連プロジェクト

- [コマンドライン](https://github.com/mermaid-js/mermaid-cli)
- [ライブエディタ](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTPサーバ](https://github.com/TomWright/mermaid-server)

## Contributors

Mermaidは成長中のコミュニティであり、常に新しいコントリビュータを受け入れています。
様々な貢献をお待ちしています。
どこから手を貸せばという人は、まず[Issue](https://github.com/mermaid-js/mermaid/issues/866)をご覧ください。

詳しい情報は、[ガイド](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)に記載しています。


## セキュリティとsafe diagrams

公開サイトにおいて、インターネット上の不特定ユーザから送られてきたテキストをブラウザに表示することは危険な場合があります。
ユーザの送ってきたコンテンツには、データが表示されたときに実行される、悪意のあるスクリプトが含まれている可能性があるからです。
特にMermaidには、HTMLで使用するための文字が多数含まれているため、標準的なサニタイジング処理を行うと図形が壊れてしまいます。
我々は、送られてきたコードを安全にするためのプロセスを改良し続けていますが、しかしセキュリティホールが完全に存在しないと保証することは困難です。

外部ユーザの攻撃から保護するために、我々は新しいセキュリティレベルを導入することにしました。
図形はサンドボックス化されたiframe内に表示され、コード内のJavaScriptが実行されることを阻止します。
より良いセキュリティのための大きな一歩です。

ただし、悪意のあるコードとともに、一部のインタラクティブな機能もブロックされてしまうことになりました。


## 脆弱性の報告について

脆弱性の報告は、問題の概要、発生させるための手順、影響を受けるバージョン、およびわかるようであれば緩和策などを、 security@mermaid.live までメールしてください。


## 謝辞

Knut Sveidqvistからひとこと。

> グラフィカルなレイアウトと描画ライブラリを提供してくれた[d3](https://d3js.org/)、および[dagre-d3](https://github.com/cpettitt/dagre-d3)プロジェクトに感謝します。
> シーケンス図の文法を提供してくれた[js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams)、ガントチャートのアイデアをくれたJessica Peterに感謝します。
> 2017年4月から協力してくれている[Tyler Long](https://github.com/tylerlong)に感謝します。
> プロジェクトがここまでこれたのは、たくさんの[コントリビュータ](https://github.com/knsv/mermaid/graphs/contributors)のおかげです。


Mermaidは、ドキュメントをより簡単に作れるようにするために、Knut Sveidqvistが作り始めました。



# 感想

[訳した](https://github.com/NurseAngel/mermaid/blob/translate-japanese/README.ja-JP.md)はいいけどローカルでビルドしようとすると何故かExplorerを巻き込んで落ちるせいでまともに確認ができておらず、そのためPRも出していません。
誰かかわりに確認とPR頼むわ。
それにしてもフロントエンドまわりの環境はいいかげんどうにかならんのかね。

さて、mermaidは[ずっと昔に紹介したことがある](https://qiita.com/rana_kualu/items/da394fd33ce019bf0ba7)のですが、当時に比べてだいぶ機能も増えたし足りなかったドキュメントも[見違えるほど充実しています](https://mermaid.js.org/intro/)。
また当時はまともに動きすらしなかった[サンドボックス](https://mermaid.live/)も今ではたいへん機能充実しており、もはやほとんどのことはオンラインで事足ります。

[Contribution](https://github.com/mermaid-js/mermaid/graphs/contributors)を見てみると、2019年後半あたりから活動がたいへん活発になってきています。
一時期mermaidの開発から離れていたKnut Sveidqvistも、そのころに戻ってきたようです。
何があったのかはわかりませんが、それ以降mermaidは継続的に開発が続けられており、それに伴って人も増え、よい開発サイクルが回っていると言えるでしょう。
そして利用もどんどん広がっていて、GitHubやここQiitaも[mermaidに対応して](https://qiita.com/Qiita/items/c07f3262d8f3b25f06c9)おり、安全に使えるようになっています。
この記事にあるダイアグラムも実際に、画像ではなくmermaidによって描画されたものです。
すごい便利ですね。

※QiitaだとC4モデルはシンタックスエラーになったのでこれだけ画像