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:
- Subir uma imagem com python instalado
- Python vai instalar algumas biliotecas
- MkDocs lê o arquivo de configuração
- MkDocs lê arquivos markdown de uma página e gera um site estático
- Site estático é disponibilizado numa pasta
- 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.
1# Criar site estático de conteúdo markdown
2mkdocs>=1.4.2
3
4# Material tema para o site
5mkdocs-material>=9.1.17
6
7# Mermaidjs - biblioteca para diagramas
8mkdocs-mermaid2-plugin
mkdocs.yml
Configuração do mkdocs.
1site_name: Mapas Mentais # título do site
2site_url: https://url-projeto-gitlab-pages # url do projeto do gitlab pages
3site_dir: public # pasta onde serão depositados os arquivos gerados
4docs_dir: ./wiki # pasta onde está o conteúdo em markdown
5
6# Adicionando o tema
7theme:
8 language: pt-BR
9 name: material
10 palette:
11 scheme: default
12
13
14# Configração para adicionar o mermaidjs
15markdown_extensions:
16 - pymdownx.superfences:
17 custom_fences:
18 - name: mermaid
19 class: mermaid
20 format: !!python/name:mermaid2.fence_mermaid_custom
21
22
23# Informando os plugins que serão utilizados
24plugins:
25 - mermaid2
.gitlab-ci.yml
Controlando o fluxo do projeto.
1image: python:3.8-slim # sobe uma imagem com python instalado
2
3pages:
4 stage: deploy
5 script:
6 - pip install -r requirements.txt # instalação das bibliotecas.
7 - mkdocs build --strict --verbose # geração dos site estático.
8 artifacts:
9 paths:
10 - public # todos os arquivos gerados serão guaradados nessa pasta. Pasta padrão do Gitlab para os sites do Gitlab Pages.
11 only:
12 refs:
13 - schedules
wiki/index.md
Para sabe a sintaxe dos diagramas visite o site Mermaid.js
Esse seria o resultado.
