Markdownの使い方

ドキュメント作成ツール

1.概要
 Markdownは、簡単に文書を作成するための軽量なマークアップ言語です。基本的な構文を覚えることで、美しく整った文書を簡単に作成することができます。
・Daring Fireball by John Gruber(Markdownの作成者によるサイト)
https://daringfireball.net/projects/markdown/
・CommonMark(Markdownの標準化プロジェクト)
https://commonmark.org/
・GitHub Flavored Markdown Spec(GitHubが使用しているMarkdownの拡張仕様)
https://github.github.com/gfm/

2.主なmarkdownの記法
(1)見出し
 見出しを作成するには、行の先頭に #[スペース]を使います。#の数を増やすことで、見出しのレベルを下げることができます。
 [例]
 # 見出し1
 ## 見出し2
 ### 見出し3

(2)強調
テキストを強調するには、* または _ を使用します。

**太字**
__太字__
*斜体*
_斜体_

(3)リスト
リストには、番号付きリストと箇条書きリストがあります。
-または*、+の後にスペースを置くと箇条書きリストを作成できます。
[例]

## 箇条書きリスト
- 項目1
- 項目2
- 項目3

## 番号付きリスト
1. 項目1
2. 項目2
3. 項目3

(4)リンクと画像
リンクを作成するには、リンクテキスト を使用します
画像を挿入するには、代替テキスト を使用します。
[例]

[Google](https://www.google.com)
![Markdownロゴ](https://markdown-here.com/img/icon256.png)

(5)引用
引用を作成するには、行の先頭に > を付けます。
[例]

## 引用
> Markdownロゴはhttps://markdown-here.com/img/icon256.から引用

(6)コード
バッククォート3つで囲むとコードブロックを作成できます。
シンタックスハイライトのために言語名を指定することもできます。
[例]

### コードブロック
```python
def hello_world():
    print("Hello, world!")

(7)テーブル
テーブルを作成するには、| と – を使用します。
Markdownの標準仕様では、テーブルのセルを区切るためにパイプ(|)を使用し、縦線としての表示はサポートされていません。縦線は、表の構造を示すためのものであり、視覚的に表示されるものではありません。
[例]

| 見出し1 | 見出し2 |
| ------- | ------- |
| データ1 | データ2 |
| データ3 | データ4 |

(8)改行
行の終わりにスペースを2つ追加することで改行を作成します。

3.Mermaidによるフロー図の作成
 Mermaidは、Markdown内でフロー図を作成するためのライブラリです。多くのMarkdownエディタやプレビューサイト(GitHub、GitLab、Typoraなど)がMermaidをサポートしています。
 ここでは、Visual Studio CodeにMermaidプラグインをインストールして使用します。
 右クリックして「Markdowプレビュー」を選択、または Ctrl+Shift+V を押ことでプレビューできます。

[例]
## フロー図  
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
## クラス図
```mermaid
classDiagram
    ClassA : +method1()
    ClassA : +method2()
    ClassB : -attribute1
    ClassB : +method3()
    ClassA <|-- ClassB
    ClassA : +attributeA
    ClassB : +attributeB
```
 ## 状態遷移図 (State Diagram)
```mermaid
stateDiagram
    [*] --> Idle
    Idle --> Processing
    Processing --> [*]
    Processing --> Error
    Error --> Idle
```
## ガントチャート (Gantt Chart)
```mermaid
gantt
    title ガントチャートの例
    dateFormat  YYYY-MM-DD
    section セクション1
    タスク1        :a1, 2024-08-01, 30d
    タスク2        :after a1  , 20d
    section セクション2
    タスク3        :2024-08-15  , 12d
    タスク4        :2024-08-25  , 20d
```

(説明)
section を使ってタスクをグループ化し、それぞれのタスクの開始日と期間を指定します。
dateFormat は日付のフォーマットを指定します。
・20d: タスクの期間が20日間であることを示します。

タイトルとURLをコピーしました