---
title: "ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim + AstroNvim v4） | grasys blog"
url: "https://blog.grasys.io/post/yusukeh/terminal-mermaid"
description: "あなたの NeoVim は mermaid を表示できますか？ Photo by Jeremy Bishop on Unsplash やっぱり mermaid なので Unsplash に ”mermaid” って入れたらこうなるw 恵比寿で IT 企業をやっているとモテると聞いて創業しましたが早いことありがたいこと…"
---

# ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim + AstroNvim v4）

-   ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[yusukeh](/authors/yusukeh/)
-   公開日：2024年10月29日
-   カテゴリー：[Tech](/categories/tech/)
-   タグ：[#シリーズ: ターミナル環境](/tags/シリーズ-ターミナル環境/)

![ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim + AstroNvim v4）](/_astro/hero.CkOZWNc-_jnlf0.webp)

あなたの NeoVim は mermaid を表示できますか？

![ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim + AstroNvim v4）](/_astro/01-0-uwNCySvUUn44VNGa-b52fd0b5.v__tw7Oa_25ABs4.webp)

Photo by [Jeremy Bishop](https://unsplash.com/@jeremybishop?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

やっぱり mermaid なので Unsplash に ”mermaid” って入れたらこうなるw

恵比寿で IT 企業をやっているとモテると聞いて創業しましたが早いことありがたいことに 10 年目に突入した長谷川です。

まだモテる成果は出ていません、、、これからです！（もうめんどくさいのでカウントやめましたw）

さて、本題です。

[NeoVim](https://neovim.io/) + [AstroNvim](https://astronvim.com/) v4 系を使って、Markdown を描画しながら mermaid を描画できるようにしてみましょう！

ちょっと要件が多くて、正確か自信がありませんw

## Requirements

-   lua
    
-   ImageMagick
    
-   [mermaid-cli](https://github.com/mermaid-js/mermaid-cli)
    
-   [NeoVim](https://neovim.io/) + [AstroNvim](https://astronvim.com/) v4
    
-   [image-nvim](https://github.com/3rd/image.nvim)
    
-   [diagram-nvim](https://github.com/3rd/diagram.nvim)
    
-   [render-markdown-nvim](https://github.com/AstroNvim/astrocommunity/tree/main/lua/astrocommunity/markdown-and-latex/render-markdown-nvim)
    

## Terminal で画像表示

もし image-nvim で画像が表示できなかったら Terminal の問題になると思います。  
私は、[WezTerm](https://wezfurlong.org/wezterm/index.html) を使ってるので [WezTerm](https://wezfurlong.org/wezterm/index.html) で画像表示ができるようにします。

[WezTerm](https://wezfurlong.org/wezterm/index.html) は [iTerm Image Protocol](https://wezfurlong.org/wezterm/imgcat.html) をサポートしているので表示ができます。

wezterm imgcat で画像を Terminal 内に表示させてみます。

Plain textcontent\_copy

```
curl -s https://www.grasys.io/wp-content/themes/www.grasys/img/logo.png | wezterm imgcat
```

![Terminal で画像表示の画面](/_astro/02-1-X-VaOsMokH8IjJxoOJQndQ-c3bab12d.BqiQVc8f_1x39nW.webp)

画像が表示できると思います。

## lua

macOS であれば [homebrew](https://brew.sh/) でも良いと思います。

自分は [anyenv](https://github.com/anyenv/anyenv) から [luaenv](https://github.com/cehoffman/luaenv) を入れて構成しています。

### [anyenv](https://github.com/anyenv/anyenv)

Plain textcontent\_copy

```
brew install anyenv
```

個人的には [homebrew](https://brew.sh/) ではなく、git clone してます。

Plain textcontent\_copy

```
declare -x ANYENV_ROOT=${HOME}/anyenv
declare -x ANYENV_DEFINITION_ROOT=${HOME}/anyenv-install

# git clone
if [ ! -d ${ANYENV_ROOT} ]; then
  git clone https://github.com/anyenv/anyenv ${ANYENV_ROOT}
  ${ANYENV_ROOT}/bin/anyenv init
fi

if [ ! -d ${ANYENV_ROOT}/plugins ]; then
  mkdir -p ${ANYENV_ROOT}/plugins
fi

if [ ! -d ${ANYENV_DEFINITION_ROOT} ]; then
  ${ANYENV_ROOT}/bin/anyenv install --init
fi

# anyenv-update
if [ ! -d ${ANYENV_ROOT}/plugins/anyenv-update ]; then
  git clone https://github.com/znz/anyenv-update.git $(${ANYENV_ROOT}/bin/anyenv root)/plugins/anyenv-update
fi

# init
if [ -d ${ANYENV_ROOT} -a -x ${ANYENV_ROOT}/bin/anyenv ]; then
  eval "$(${ANYENV_ROOT}/bin/anyenv init -)"
  if [ -f ${ANYENV_ROOT}/completions/anyenv.bash ]; then
   source ${ANYENV_ROOT}/completions/anyenv.bash
  fi
  declare -x PATH="${ANYENV_ROOT}/bin:${PATH}"
fi

eval "$(${ANYENV_ROOT}/bin/anyenv init -)"
```

### .bashrc または .bash\_profile などに

Plain textcontent\_copy

```
### anyenv
declare -x ANYENV_ROOT="${HOME}/anyenv"
declare -x ANYENV_DEFINITION_ROOT="${HOME}/anyenv-install"
if [ -d ${HOME}/anyenv -a -x ${ANYENV_ROOT}/bin/anyenv ]; then
  eval "$(${ANYENV_ROOT}/bin/anyenv init -)"
  source ${ANYENV_ROOT}/completions/anyenv.bash
  declare -x PATH="${ANYENV_ROOT}/bin:${PATH}"
fi
```

こんな感じで Terminal を再起動するなりして

### anyenv install luaenv

[anyenv](https://github.com/anyenv/anyenv) で [luaenv](https://github.com/cehoffman/luaenv) 入れる

Plain textcontent\_copy

```
anyenv install luaenv
```

### [luaenv](https://github.com/cehoffman/luaenv) install

luaenv install -l で install できる lua version が一覧できるので

Plain textcontent\_copy

```
luaenv install -l
Available versions:
  5.1.5
  5.2.1
  5.2.2
  5.2.3
  5.2.4
  5.3.0
  5.3.1
  5.3.2
  5.3.3
  5.3.4
  5.3.5
  5.3.6
  5.4.0
  5.4.1
  5.4.2
  5.4.3
  5.4.4
  5.4.5
  5.4.6
  luajit-2.0.1
  luajit-2.0.1-p1
  luajit-2.0.2
  luajit-2.0.3
  luajit-2.0.4
  luajit-2.0.5
  luajit-2.1-dev
  luajit-2.1.0-beta2
  luajit-2.1.0-beta3
  luvit-0.6.0
  luvit-0.6.1
  luvit-dev
```

こんな感じで数字のみにしてみて（2024/10/03 時点では 5.4.6 が最新でした）

Plain textcontent\_copy

```
luaenv install -l | grep '^  [0-9]' | sed -e "s/  //g" | tail -1
5.4.6
```

とりあえず数字だけのやつで最新を入れて、global してしまって rehash してしまう（雑w

Plain textcontent\_copy

```
luaenv install $(luaenv install -l | grep '^  [0-9]' | sed -e "s/  //g" | tail -1)
luaenv global $(luaenv install -l | grep '^  [0-9]' | sed -e "s/  //g" | tail -1)
luaenv rehash
```

### luaenv-luarocks

luarocks が必要なので [luaenv-luarocks](https://github.com/xpol/luaenv-luarocks) で入れます。

Plain textcontent\_copy

```
declare plugin=luaenv-luarocks
declare plugin_repo=https://github.com/xpol/luaenv-luarocks.git
git clone https://github.com/xpol/luaenv-luarocks.git $(luaenv root)/plugins/luaenv-luarocks
```

### Install luarocks

2.4.3 がなぜか入らなかったので一旦 2.4.1 で

Plain textcontent\_copy

```
luaenv luarocks 2.4.1
```

これで一旦 lua は準備 OK

## ImageMagick

[homebrew](https://brew.sh/) にあるので

Plain textcontent\_copy

```
brew install imagemagick
```

## mermaid-cli

[mermaid-cli](https://github.com/mermaid-js/mermaid-cli) は [nodejs](https://nodejs.org/) で書かれた mermaid のコマンドラインで画像出力できるツールです。

自分は node の依存関係の管理があまり好きではないので。  
コマンドラインで実行するものは [volta](https://volta.sh/) で管理してます。

[nodejs](https://nodejs.org/) を書く人は読み飛ばして貰えれば・・・  
良いか悪いかはおいといて自分はこれで困ってません。

### [volta](https://volta.sh/)

適当に nodejs で書かれた Application を PATH 通して動くようにしてくれます。  
個人的に管理が楽なのでこれを使っています。

自分は VOLTA\_HOME を ${HOME}/.volta から変えてます。

Plain textcontent\_copy

```
declare -x VOLTA_HOME=${HOME}/volta
declare -x node_modules=(node npm npx yarn)
curl -s https://get.volta.sh | bash

for nm in ${node_modules[@]}
do
  ${VOLTA_HOME}/bin/volta install ${nm}
done
```

### .bashrc か .bash\_profile あたりに

Plain textcontent\_copy

```
# volta
if [ -x ${HOME}/volta/bin/volta ]; then
  declare -x VOLTA_HOME=${HOME}/volta
  if [ -d ${VOLTA_HOME}/bin ]; then
    PATH=${VOLTA_HOME}/bin:${PATH}
  fi
  eval "$(volta completions $(basename ${SHELL}))"
fi
```

### install mermaid-cli

こんな感じで volta で install でき、which コマンドで入ってるか確認できます。

Plain textcontent\_copy

```
volta install @mermaid-js/mermaid-cli
which mmdc
```

## AstroNvim

やっとここまできたw

基本的なことはこちらを参照で。

[](https://medium.com/@yusuke_h/%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%8C%E3%83%80%E3%82%B5%E3%81%84%E3%81%A8%E3%83%A2%E3%83%86%E3%81%AA%E3%81%84-neovim-astronvim-v4-0%E7%B4%B9%E4%BB%8B%E7%B7%A8-a8beeca5f2c8?source=post_page-----a7ffe1d1aef1--------------------------------)[ターミナルがダサいとモテない。neovim+AstroNvim v4.0紹介編](https://blog.grasys.io/post/yusukeh/terminal-neovim-astronvim-v4/)

## AstroCommunity

HOME に astrocommunity を clone しておきましょう。

Plain textcontent\_copy

```
cd
git clone --depth 1 https://github.com/AstroNvim/astrocommunity
```

## image-nvim

[AstroCommunity](https://github.com/AstroNvim/astrocommunity) に [image-nvim](https://github.com/AstroNvim/astrocommunity/tree/19a9c61883713e1acdb6ee799f2ba221b2886460/lua/astrocommunity/media/image-nvim) があります。  
そちらを利用します。

astrocommunity にあるので cp します。

Plain textcontent\_copy

```
cp \
  ${HOME}/astrocommunity/lua/astrocommunity/media/image-nvim/init.lua \
  ${HOME}/.config/nvim/lua/plugins/image-nvim.lua
```

## diagram-nvim

こちらは [AstroCommunity](https://github.com/AstroNvim/astrocommunity) にはないので普通に入れます。

[](https://github.com/3rd/diagram.nvim?source=post_page-----a7ffe1d1aef1--------------------------------)[GitHub - 3rd/diagram.nvim: Diagrams as code in Neovim.](https://github.com/3rd/diagram.nvim?source=post_page-----a7ffe1d1aef1--------------------------------)

Plain textcontent\_copy

```
${HOME}/.config/nvim/lua/plugins/diagram-nvim.lua
return {
  "3rd/diagram.nvim",
  dependencies = {
    "3rd/image.nvim",
  },
  -- opts = { -- you can just pass {}, defaults below
  --   renderer_options = {
  --     mermaid = {
  --       background = "transparent", -- nil | "transparent" | "white" | "#hex"
  --       theme = "dark", -- nil | "default" | "dark" | "forest" | "neutral"
  --       scale = 1, -- nil | 1 (default) | 2  | 3 | ...
  --     },
  --     plantuml = {
  --       charset = nil,
  --     },
  --     d2 = {
  --       theme_id = nil,
  --       dark_theme_id = nil,
  --       scale = nil,
  --       layout = nil,
  --       sketch = nil,
  --     },
  --   }
  -- },
  config = function()
    require("diagram").setup({
      integrations = {
        require("diagram.integrations.markdown"),
        require("diagram.integrations.neorg"),
      },
      renderer_options = {
        mermaid = {
          background = "transparent",
          theme = "dark",
          scale = 1,
        },
        plantuml = {
          charset = "utf-8",
        },
        d2 = {
          theme_id = 1,
          dark_theme_id = 200,
          scale = -1,
          layout = nil,
          sketch = nil,
        },
      },
  })
  end
}
```

こんな感じで保存して・・・

## render-markdown-nvim

こちらの [post](https://blog.grasys.io/post/yusukeh/terminal-neovim-astronvim-v4/) にも書いてあるけど

[](https://github.com/AstroNvim/astrocommunity/tree/main/lua/astrocommunity/markdown-and-latex/render-markdown-nvim?source=post_page-----a7ffe1d1aef1--------------------------------)[astrocommunity/lua/astrocommunity/markdown-and-latex/render-markdown-nvim at main ·…](https://github.com/AstroNvim/astrocommunity/tree/main/lua/astrocommunity/markdown-and-latex/render-markdown-nvim?source=post_page-----a7ffe1d1aef1--------------------------------)

先程clone した astrocommunity からコピーしてきます。

Plain textcontent\_copy

```
cp \
  ${HOME}/astrocommunity/lua/astrocommunity/markdown-and-latex/render-markdown-nvim/init.lua \
  ${HOME}/.config/nvim/lua/plugins/render-markdown-nvim.lua
```

## （やっと）mermaid を描画

[mermaid.js](https://mermaid.js.org/) にサンプルあるんでいろいろ表示してみましょう。

flowcharts のシンプルなやつから

### Flowcharts

[](https://mermaid.js.org/syntax/flowchart.html?source=post_page-----a7ffe1d1aef1--------------------------------)[Flowcharts Syntax | Mermaid](https://mermaid.js.org/syntax/flowchart.html?source=post_page-----a7ffe1d1aef1--------------------------------)

Plain textcontent\_copy

```
cat << EOS > flowchart.md
# diagram-nvim

## flowchart

### A node (default)

\`\`\`mermaid
flowchart LR
  id
\`\`\`

### A node with text

\`\`\`mermaid
flowchart LR
    id1[This is the text in the box]
\`\`\`

EOS

vi flowchart.md
```

![A node with textの画面](/_astro/03-1-jlf9AijWQcmprNMWNcroag-a59cb531.BwHBpaoa_ZdvoQE.webp)

flowcharts

実際にこんな感じで表示できます。

神すぎる！！！！

もうちょっと複雑なのやってみる

### Mindmap

[](https://mermaid.js.org/syntax/mindmap.html?source=post_page-----a7ffe1d1aef1--------------------------------)[Mindmap | Mermaid](https://mermaid.js.org/syntax/mindmap.html?source=post_page-----a7ffe1d1aef1--------------------------------)

Plain textcontent\_copy

```
cat << EOS > mindmap.md
# diagram-nvim

## mindmap

\`\`\`mermaid
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
\`\`\`
EOS

vi mindmap.md
```

![mindmapの画面](/_astro/04-1-Rt1pMsDrCdbmXrwtPr3G6A-55864d1e.FIizCYG-_2viMuB.webp)

mindmap.md

普通に表示されるwww

### Pie Chart

[](https://mermaid.js.org/syntax/examples.html?source=post_page-----a7ffe1d1aef1--------------------------------#basic-pie-chart)[Examples | Mermaid](https://mermaid.js.org/syntax/examples.html?source=post_page-----a7ffe1d1aef1--------------------------------#basic-pie-chart)

Plain textcontent\_copy

```
cat << EOS > piechart.md
# diagram-nvim

## piechart

\`\`\`mermaid
pie title NETFLIX
         "Time spent looking for movie" : 90
         "Time spent watching it" : 10
\`\`\`
EOS
```

![piechartの画面](/_astro/05-1-6P-SqhkHilwOOFr0SH1s9g-a8d52f58.PHACFzIy_Z12nz9w.webp)

piechart

さらに

SequenceDiagram: Loops, alt and opt

[](https://mermaid.js.org/syntax/examples.html?source=post_page-----a7ffe1d1aef1--------------------------------#sequencediagram-loops-alt-and-opt)[Examples | Mermaid](https://mermaid.js.org/syntax/examples.html?source=post_page-----a7ffe1d1aef1--------------------------------#sequencediagram-loops-alt-and-opt)

Plain textcontent\_copy

```
cat << EOS > sequenceDiagram.md
# diagram-nvim

## sequeceDiagram

\`\`\`mermaid
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
\`\`\`
EOS
```

![sequeceDiagramの画面](/_astro/06-1-ciBIEp1BfC-EPAMo6I5wmA-330517e2.7WEJh9kC_Z1bH2EM.webp)

SequenceDiagram: Loops, alt and opt

もう一発

### Architecture

[](https://mermaid.js.org/syntax/architecture.html?source=post_page-----a7ffe1d1aef1--------------------------------)[Architecture Diagrams Documentation (v11.1.0+) | Mermaid](https://mermaid.js.org/syntax/architecture.html?source=post_page-----a7ffe1d1aef1--------------------------------)

Plain textcontent\_copy

```
cat << EOS > architecture.md
# diagram-nvim

## architecture

\`\`\`mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db
\`\`\`
EOS

vi architecture.md
```

![architectureの画面](/_astro/07-1-wh8rKVR_WmRhhqp4QXG0tg-caa266b7.CDiahQe4_1wVBoJ.webp)

Architecture

素敵すぎる！！！！！！！！

素晴らしすぎるし素敵すぎる！！！

neovim で markdown を描画する必要があるのかなんて野暮な話はしてはいけませんw

因みにしばらく使ってみましたが、大きな mermaid を表示しながら、激しく操作すると固まります。気を付けてください。

## Applendix: d2で表示

d2も試してみましたが、表示できました。

[](https://d2lang.com/?source=post_page-----a7ffe1d1aef1--------------------------------)[Home | D2 Documentation](https://d2lang.com/?source=post_page-----a7ffe1d1aef1--------------------------------)

### Install d2

Plain textcontent\_copy

```
brew install d2
```

これで d2が Install されます。

markdown を用意します。

Plain textcontent\_copy

```
cat << EOS > d2.md
# d2

\`\`\`d2
vars: {
  d2-config: {
    layout-engine: elk
    # Terminal theme code
    theme-id: 300
  }
}
network: {
  cell tower: {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    transmitter

    satellites -> transmitter: send
    satellites -> transmitter: send
    satellites -> transmitter: send
  }

  online portal: {
    ui: {shape: hexagon}
  }

  data processor: {
    storage: {
      shape: cylinder
      style.multiple: true
    }
  }

  cell tower.transmitter -> data processor.storage: phone logs
}

user: {
  shape: person
  width: 130
}

user -> network.cell tower: make call
user -> network.online portal.ui: access {
  style.stroke-dash: 3
}

api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}

network.data processor -> api server

\`\`\`
EOS

vi d2.md
```

![vi d2.mdの画面](/_astro/08-1-weFIvU0WozdFObPBmPWRYQ-49a47780.B42YrBSf_Z2ooQGO.webp)

d2

d2も表示できました。

d2-config のセクションは機能してなさそうですが、表示できるので一旦良いかな

ターミナル環境について他の記事も書いているので、よろしければこちらもご覧ください！  
[『ターミナルがダサいとモテない』シリーズ一覧](https://blog.grasys.io/tags/series-terminal-update)

転載：[ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim+AstroNvim v4）](https://medium.com/@yusuke_h/%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%8C%E3%83%80%E3%82%B5%E3%81%84%E3%81%A8%E3%83%A2%E3%83%86%E3%81%AA%E3%81%84-mermaid%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%81%9E%E7%B7%A8-neovim-astronvim-v4-a7ffe1d1aef1)

## この記事を書いた人

[![](/_astro/yusukeh.BvUd2yKE_1mQ6Fp.webp)](/authors/yusukeh/)

### [yusukeh](/authors/yusukeh/)

Fly high. Think deep. Move fast. Go far.🦅

-   [X](https://x.com/yusukeh "X")
-   [GitHub](https://github.com/yusukeh "GitHub")
-   [Medium](https://medium.com/@yusukeh "Medium")
-   [Facebook](https://www.facebook.com/yusuke.exzm "Facebook")
-   [Instagram](https://www.instagram.com/yusukehasegawa/ "Instagram")
-   [LinkedIn](https://www.linkedin.com/in/hasegawa-yusuke-091b4164/ "LinkedIn")

[プロフィールと記事一覧](/authors/yusukeh/)