Markdownでガントチャートを作成する

最近プロジェクトを始めたんですが、最初のタスクの一つが計画を立てるためのガントチャートを作成することでした。コードを使っておしゃれな図を作ることができる、Markdownにniceな追加機能を提供するMermaidというフレームワークを知っていました。

このカスタマイズがどうやって自分が望む見た目にするかを理解するのに、かなりの時間を費やしたので、これを他の誰かのために記録しておくといいなと思いました。

手順

これにはいくつかの手順が必要です：

VS Codeが必要です
markdown内のmermaidドキュメントをレンダリングするVS Code拡張機能が必要です: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
markdown mermaidコードが必要です! 以下を参照してください：

%%{
  init: {
    "gantt": {
      'topPadding' :100,
      'rightPadding' :100,
      'leftPadding' :100,
      'barHeight' :50,
      'fontSize' :17,
      'titleTopMargin': 75,
      'gridLineStartPadding' : 48,
      'barGap' :10,
      'sectionFontSize': 16
    },
    'theme': 'base',
    'themeVariables': {
      "fontFamily": 'Sans-Serif',
      'primaryColor': '#bcc8ff',
      'primaryTextColor': '#000',
      'primaryBorderColor': '#2d2ac9',
      'tertiaryColor': '#000',
      'textColor':'#000',
      'tertiaryTextColor': '#000'
    }
  }
}%%

%% https://mermaid.js.org/config/directives.html#declaring-directives
%% https://mermaid.js.org/config/schema-docs/config-defs-gantt-diagram-config.html#toppadding

%% color theme need opened with the high contrast light theme.

gantt
    title changed title
    dateFormat MM
    axisFormat %B
    section Task 1
        Do Task 1 :task1, 01, 91d
    section Task 2
        Do Task 2 :task2, 02, 60d
    section Task 3
        create chart :task3, 05, 30d

全画面モードを終了全画面モードに入る

ガイド付きビデオ

こちらのビデオを見ながら一緒に作業することもできます: https://youtu.be/K70D5ebtEiw

注記：テーマ変数を変更するには、パラメータを変更できるmermaidの命令を使用しているため、baseテーマが選択されている必要があります。

これはobisianのアドオンと統合して、メモ取りをさらにファンシーにすることもできます！

読んでいただきありがとうございます！

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/rbevin777/create-a-gantt-chart-with-markdown-31hd

Markdownでガントチャートを作成する

手順

ガイド付きビデオ

タグ

最新の記事