Gráficos e diagramas
Typst, DOT e Mermaid dentro de uma página MDX.
Um gráfico com CeTZ-Plot
Este gráfico compara e . Mostra funções matemáticas, não medições de programas reais. Para , os valores são 10 e 100.
O ficheiro usa CeTZ e CeTZ-Plot. O SVG mantém a nitidez quando aumentas o zoom.
import Typst from '../../../components/Typst.astro';
import grafico from '../../exemplo/crescimento.typ?raw';
<Typst source={grafico} format="svg" alt="Descrição do gráfico" />Um diagrama com Fletcher
Fletcher permite desenhar caixas e setas em Typst. Este exemplo representa um programa em três passos.
Uma árvore com DOT
DOT descreve as ligações entre os nós. O Graphviz escolhe a posição de cada um. Aqui temos uma pequena árvore de pesquisa binária.
digraph Pesquisa {
8 -> 3; 8 -> 10;
3 -> 1; 3 -> 6;
10 -> 14;
}Um bloco escrito em Typst
Podemos incluir texto, listas e equações de um ficheiro .typ dentro de uma página MDX.
A soma dos primeiros números naturais é:
- O texto continua selecionável.
- As equações usam MathML.
- Os diagramas podem ser exportados para SVG.
Uma sequência com Mermaid
Mermaid descreve quem comunica e em que ordem. Cada coluna pertence a um participante. O tempo avança de cima para baixo; a seta contínua mostra o pedido e a tracejada mostra a resposta.
sequenceDiagram
participant N as Navegador
participant S as Servidor
N->>S: Pedir uma página
S-->>N: Responder com HTMLUm vídeo
Este vídeo da série de álgebra linear do 3Blue1Brown explica vetores. É um exemplo de vídeo incorporado, independente dos diagramas acima.
Experimenta
Abre o ficheiro desta página no GitHub e os ficheiros dos diagramas. Muda as funções, os nós ou as mensagens e volta a construir o site.
