Mermaid.jsを使いたい

Markdown的な使い方でフローチャートやガンチャートを表現できる

以下のような感じで表現できる。

            graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
        

            graph LR
            A --- B
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner);
        

ガンチャート

            gantt
              title PHPのライフサイクル

              section PHP 7.2
                アクティブサポート      : done, 2017-11-30, 110d
                セキュリティサポート     : crit, 2020-11-30

              section PHP7.3
                アクティブサポート      : 2018-12-06, 2020-12-06
                セキュリティサポート     : crit, 2021-12-06

              section PHP7.4
                アクティブサポート      : 2019-11-28, 2021-11-28
                セキュリティサポート     : crit, 2022-11-28
        

            gantt
              title PHPのライフサイクル

              section PHP 7.2
                アクティブサポート      : done, 2017-11-30, 2019-11-30
                セキュリティサポート     : crit, 2020-11-30

              section PHP7.3
                アクティブサポート      : 2018-12-06, 2020-12-06
                セキュリティサポート     : crit, 2021-12-06

              section PHP7.4
                アクティブサポート      : 2019-11-28, 2021-11-28
                セキュリティサポート     : crit, 2022-11-28
        

マインドマップもできるの??

            mindmap
                top
                    idea1
                    長野
                    idea3
                        信州
                        安曇野
                        伊那
                            テスト
                                さらにテスト
        

            mindmap
                top
                    idea1
                    長野
                    idea3
                        信州
                        安曇野
                        伊那
                            テスト
                                さらにテスト
        

シーケンス図

        sequenceDiagram
        花子-->>太郎: 良いですよ!
        花子->>次郎: あなたはどうですか?
        次郎-->>花子: とても良いです
        
            
            sequenceDiagram
            花子-->>太郎: 良いですよ!
            花子->>次郎: あなたはどうですか?
            次郎-->>花子: とても良いです
            
        

円グラフ

            pie showData
            title 日本の人口
            "巨人" : 42.96
            "阪神" : 50.05
            "ヤクルト" : 10.01
            "中日" :  5
        
            
                pie showData
                title 日本の人口
                "巨人" : 42.96
                "阪神" : 50.05
                "ヤクルト" : 10.01
                "中日" :  5
            
        

とりあえず使い方メモ

リンク

© 2022-2024 shuheig.com