Gráficos e diagramas
Typst e DOT 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.
Um 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.
A miniatura vem do YouTube. O vídeo só carrega quando clicas. Abrir no YouTube
Experimenta
Abre o ficheiro desta página no GitHub e os ficheiros Typst e DOT. Muda as funções, os nós ou as cores e volta a construir o site.