Criando mapas mentais com Mermaidjs no MkDocs

Criar um mapa mental utilizando Mermaid.js em páginas de sites feitos com MkDocs e disponibilizado num Gitlab Pages.

Processo:

1. Subir uma imagem com python instalado
2. Python vai instalar algumas biliotecas
3. MkDocs lê o arquivo de configuração
4. MkDocs lê arquivos markdown de uma página e gera um site estático
5. Site estático é disponibilizado numa pasta
6. Gitlab lê esta página e disponibiliza o site no Gitlab Pages.

Arquivos do projeto:

• .gitlab-ci.yml : configura toda a execução do projeto;
• requirements.txt : pacotes que serão instalados pelo python e utilizados no projeto;
• mkdocs.yml : configuração do MkDocs como tema (material) e plugins (mermaidjs);
• wiki : pasta com as páginas de conteúdo;
  • index.md : página que conterá o mapa mental;

requirements.txt

Bibliotecas que serão instaladas pelo python e utilizadas pelo mkdocs.

# Criar site estático de conteúdo markdown
mkdocs>=1.4.2

# Material tema para o site
mkdocs-material>=9.1.17

# Mermaidjs - biblioteca para diagramas
mkdocs-mermaid2-plugin

mkdocs.yml

Configuração do mkdocs.

site_name: Mapas Mentais                        # título do site
site_url: https://url-projeto-gitlab-pages      # url do projeto do gitlab pages        
site_dir: public                                # pasta onde serão depositados os arquivos gerados
docs_dir: ./wiki                                # pasta onde está o conteúdo em markdown

# Adicionando o tema
theme:
  language: pt-BR
  name: material
  palette:
    scheme: default


# Configração para adicionar o mermaidjs
markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
              - name: mermaid
                class: mermaid
                format: !!python/name:mermaid2.fence_mermaid_custom


# Informando os plugins que serão utilizados
plugins:
  - mermaid2

.gitlab-ci.yml

Controlando o fluxo do projeto.

image: python:3.8-slim # sobe uma imagem com python instalado

pages:
    stage: deploy
    script:
        - pip install -r requirements.txt # instalação das bibliotecas.
        - mkdocs build --strict --verbose # geração dos site estático.
    artifacts:
        paths:
            - public # todos os arquivos gerados serão guaradados nessa pasta. Pasta padrão do Gitlab para os sites do Gitlab Pages.
    only:
        refs:
        - schedules

wiki/index.md

Para sabe a sintaxe dos diagramas visite o site Mermaid.js

# Criando mapas mentais com Mermaidjs no MkDocs

Testando a criação de mapas mentais no MkDocs com Mermaidjs


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

Esse seria o resultado.