{"id":20324638,"url":"https://github.com/gh640/mermaid-cheatsheet-ja","last_synced_at":"2025-04-11T19:42:13.230Z","repository":{"id":74923671,"uuid":"459491943","full_name":"gh640/mermaid-cheatsheet-ja","owner":"gh640","description":"(Japanese) GitHub のコメントや README で使える Mermaid の日本語チートシート","archived":false,"fork":false,"pushed_at":"2022-08-08T03:08:00.000Z","size":6,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T15:49:01.129Z","etag":null,"topics":["github","mermaid"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gh640.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-15T08:30:12.000Z","updated_at":"2023-12-10T11:33:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"ec4b2362-dfda-4125-86c0-010bce37a4cc","html_url":"https://github.com/gh640/mermaid-cheatsheet-ja","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gh640%2Fmermaid-cheatsheet-ja","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gh640%2Fmermaid-cheatsheet-ja/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gh640%2Fmermaid-cheatsheet-ja/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gh640%2Fmermaid-cheatsheet-ja/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gh640","download_url":"https://codeload.github.com/gh640/mermaid-cheatsheet-ja/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248468497,"owners_count":21108829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["github","mermaid"],"created_at":"2024-11-14T19:36:42.140Z","updated_at":"2025-04-11T19:42:13.222Z","avatar_url":"https://github.com/gh640.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mermaid チートシート\n\n[Mermaid](https://github.com/mermaid-js/mermaid) の日本語チートシートです。\n\nGitHub の Markdown のコードブロックで Mermaid シンタックスが使えるようになりました。\n\n- [Include diagrams in your Markdown files with Mermaid | The GitHub Blog](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)\n\n## 公式 README のサンプル\n\n- [フローチャート](#フローチャート)\n- [シーケンス図](#シーケンス図)\n- [ガントチャート](#ガントチャート)\n- [クラス図](#クラス図)\n- [状態図](#状態図)\n- [パイチャート（円グラフ）](#パイチャート円グラフ)\n- [Git グラフ](#git-グラフ)\n- [ユーザージャーニー図](#ユーザージャーニー図)\n\n### フローチャート\n\n```\nflowchart LR\n    A[ハード] --\u003e|テキスト| B(ラウンド)\n    B --\u003e C{判断}\n    C --\u003e|1| D[結果 1]\n    C --\u003e|2| E[結果 2]\n```\n\n```mermaid\nflowchart LR\n    A[ハード] --\u003e|テキスト| B(ラウンド)\n    B --\u003e C{判断}\n    C --\u003e|1| D[結果 1]\n    C --\u003e|2| E[結果 2]\n```\n\n- [Flowchart | mermaid](https://mermaid-js.github.io/mermaid/#/flowchart)\n\n### シーケンス図\n\n```\nsequenceDiagram\n    アリス-\u003e\u003eジョン: やぁ、ジョン、調子はどう？\n    loop ヘルスチェック\n        ジョン-\u003e\u003eジョン: 心気症との闘い\n    end\n    Note right of ジョン: 合理的な思考\n    ジョン--\u003e\u003eアリス: いいよ！\n    ジョン-\u003e\u003eボブ: 調子はどう？\n    ボブ--\u003e\u003eジョン: ばっちりよ！\n```\n\n```mermaid\nsequenceDiagram\n    アリス-\u003e\u003eジョン: やぁ、ジョン、調子はどう？\n    loop ヘルスチェック\n        ジョン-\u003e\u003eジョン: 心気症との闘い\n    end\n    Note right of ジョン: 合理的な思考\n    ジョン--\u003e\u003eアリス: いいよ！\n    ジョン-\u003e\u003eボブ: 調子はどう？\n    ボブ--\u003e\u003eジョン: ばっちりよ！\n```\n\n- [Sequence diagram | mermaid](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)\n\n### ガントチャート\n\n```\ngantt\n    dateFormat  YYYY-MM-DD\n    title GANNT チャートを mermaid に追加\n    excludes weekdays 2014-01-10\n\n    section セクション\n    完了タスク            :done,    des1, 2014-01-06,2014-01-08\n    アクティブタスク               :active,  des2, 2014-01-09, 3d\n    未来のタスク               :         des3, after des2, 5d\n    未来のタスク 2               :         des4, after des3, 5d\n```\n\n```mermaid\ngantt\n    dateFormat  YYYY-MM-DD\n    title GANNT チャートを mermaid に追加\n    excludes weekdays 2014-01-10\n\n    section セクション\n    完了タスク            :done,    des1, 2014-01-06,2014-01-08\n    アクティブタスク               :active,  des2, 2014-01-09, 3d\n    未来のタスク               :         des3, after des2, 5d\n    未来のタスク 2               :         des4, after des3, 5d\n```\n\n- [Gantt | mermaid](https://mermaid-js.github.io/mermaid/#/gantt)\n\n### クラス図\n\n```\nclassDiagram\n    Animal \u003c|-- Duck\n    Animal \u003c|-- Fish\n    Animal \u003c|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck {\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish {\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra {\n        +bool is_wild\n        +run()\n    }\n```\n\n```mermaid\nclassDiagram\n    Animal \u003c|-- Duck\n    Animal \u003c|-- Fish\n    Animal \u003c|-- Zebra\n    Animal : +int age\n    Animal : +String gender\n    Animal: +isMammal()\n    Animal: +mate()\n    class Duck {\n        +String beakColor\n        +swim()\n        +quack()\n    }\n    class Fish {\n        -int sizeInFeet\n        -canEat()\n    }\n    class Zebra {\n        +bool is_wild\n        +run()\n    }\n```\n\n- [Class diagram | mermaid](https://mermaid-js.github.io/mermaid/#/classDiagram)\n\n### 状態図\n\n```\nstateDiagram-v2\n    [*] --\u003e 停止\n    停止 --\u003e [*]\n    停止 --\u003e 移動\n    移動 --\u003e 停止\n    移動 --\u003e 衝突\n    衝突 --\u003e [*]\n```\n\n```mermaid\nstateDiagram-v2\n    [*] --\u003e 停止\n    停止 --\u003e [*]\n    停止 --\u003e 移動\n    移動 --\u003e 停止\n    移動 --\u003e 衝突\n    衝突 --\u003e [*]\n```\n\n- [State diagram | mermaid](https://mermaid-js.github.io/mermaid/#/stateDiagram)\n\n### パイチャート（円グラフ）\n\n```\npie title ボランティアに迎えられたペット\n    \"犬\" : 386\n    \"猫\" : 85\n    \"ねずみ\" : 15\n```\n\n```mermaid\npie title ボランティアに迎えられたペット\n    \"犬\" : 386\n    \"猫\" : 85\n    \"ねずみ\" : 15\n```\n\n- [Pie chart | mermaid](https://mermaid-js.github.io/mermaid/#/pie)\n\n### Git グラフ\n\n```\ngitGraph\n   commit\n   commit tag: \"v1.0.0\"\n   branch develop\n   commit\n   commit\n   commit\n   checkout main\n   commit\n   commit\n   ```\n\n```mermaid\ngitGraph\n   commit\n   commit tag: \"v1.0.0\"\n   branch develop\n   commit\n   commit\n   commit\n   checkout main\n   commit\n   commit\n```\n\n- [Gitgraph diagram | mermaid](https://mermaid-js.github.io/mermaid/#/gitgraph)\n\n### ユーザージャーニー図\n\n```\njourney\n    title 私の勤務日\n    section 出勤\n      お茶をいれる: 5: 私\n      上の階にのぼる: 3: 私\n      働く: 1: 私, 猫\n    section 退勤\n      下の階におりる: 5: 私\n      座る: 3: 私\n```\n\n```mermaid\njourney\n    title 私の勤務日\n    section 出勤\n      お茶をいれる: 5: 私\n      上の階にのぼる: 3: 私\n      働く: 1: 私, 猫\n    section 退勤\n      下の階におりる: 5: 私\n      座る: 3: 私\n```\n\n- [User journey | mermaid](https://mermaid-js.github.io/mermaid/#/user-journey)\n\n## REAMDE にサンプルの無いもの\n\n- [ER 図](#er-図)\n- [要件図](#要件図)\n\n### ER 図\n\n```\nerDiagram\n    CUSTOMER ||--o{ ORDER : \"入れる\"\n    ORDER ||--|{ LINE-ITEM : \"含む\"\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : \"使う\"\n```\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : \"入れる\"\n    ORDER ||--|{ LINE-ITEM : \"含む\"\n    CUSTOMER }|..|{ DELIVERY-ADDRESS : \"使う\"\n```\n\n```\nerDiagram\n    CUSTOMER ||--o{ ORDER : \"入れる\"\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : \"含む\"\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : \"入れる\"\n    CUSTOMER {\n        string name\n        string custNumber\n        string sector\n    }\n    ORDER ||--|{ LINE-ITEM : \"含む\"\n    ORDER {\n        int orderNumber\n        string deliveryAddress\n    }\n    LINE-ITEM {\n        string productCode\n        int quantity\n        float pricePerUnit\n    }\n```\n\n複雑なサンプル:\n\n```\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : \"許可する\"\n    CAR {\n        string allowedDriver FK \"許可されたドライバーのライセンス\"\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : \"である\"\n    PERSON {\n        string driversLicense PK \"ライセンスナンバー\"\n        string firstName\n        string lastName\n        int age\n    }\n```\n\n```mermaid\nerDiagram\n    CAR ||--o{ NAMED-DRIVER : \"許可する\"\n    CAR {\n        string allowedDriver FK \"許可されたドライバーのライセンス\"\n        string registrationNumber\n        string make\n        string model\n    }\n    PERSON ||--o{ NAMED-DRIVER : \"である\"\n    PERSON {\n        string driversLicense PK \"ライセンスナンバー\"\n        string firstName\n        string lastName\n        int age\n    }\n```\n\n※エンティティ名は日本語にすると描画に失敗するため英語のまま\n\n- [Entity Relationship Diagram | mermaid](https://mermaid-js.github.io/mermaid/#/entityRelationshipDiagram)\n\n### 要件図\n\n```\nrequirementDiagram\n    requirement \"テスト要件\" {\n        id: 1\n        text: \"テストテキスト。\"\n        risk: high\n        verifymethod: test\n    }\n\n    element \"テストエンティティ\" {\n        type: \"シミュレーション\"\n    }\n\n    \"テストエンティティ\" - satisfies -\u003e \"テスト要件\"\n```\n\n```mermaid\nrequirementDiagram\n    requirement \"テスト要件\" {\n        id: 1\n        text: \"テストテキスト。\"\n        risk: high\n        verifymethod: test\n    }\n\n    element \"テストエンティティ\" {\n        type: simulation\n    }\n\n    \"テストエンティティ\" - satisfies -\u003e \"テスト要件\"\n```\n\n- [Requirement Diagram | mermaid](https://mermaid-js.github.io/mermaid/#/requirementDiagram)\n\n## Mermaid 公式\n\n- [リポジトリ](https://github.com/mermaid-js/mermaid)\n- [ドキュメント](https://mermaid-js.github.io/mermaid/#/)\n- [ライブエディタ](https://mermaid-js.github.io/mermaid-live-editor/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgh640%2Fmermaid-cheatsheet-ja","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgh640%2Fmermaid-cheatsheet-ja","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgh640%2Fmermaid-cheatsheet-ja/lists"}