Add Mermaid Diagrams to Starlight
This guide helps you add Mermaid Diagrams to Starlight.
Steps by steps
Section titled Steps by steps-
Start by installing the
rehype-mermaid
↗ andplaywright
↗:Terminal window npm add rehype-mermaid playwright playwright-chromiumTerminal window pnpm add rehype-mermaid playwright playwright-chromiumTerminal window yarn add rehype-mermaid playwright playwright-chromiumTerminal window bun add rehype-mermaid playwright playwright-chromium -
Setup Astro config:
astro.config.mjs // ...import rehypeMermaid from "rehype-mermaid"export default defineConfig({markdown: {remarkPlugins: [rehypeMermaid],},integrations: [starlight({// ...customCss: ['./src/styles/mermaid.css',],})],}) -
Custom some CSS for your diagrams:
styles/mermaid.css svg[id^="mermaid"] {/* text in mermaid diagram partially hidden otherwise */.node .label {line-height: 1.2;}.flowchart-link {stroke: var(--sl-color-white) !important;}.marker {stroke: var(--sl-color-white);fill: var(--sl-color-white) !important;}.node-labels {fill: var(--sl-color-white);}}
Example
Section titled Example```mermaid---config: sankey: showValues: false---sankey-beta
Agricultural 'waste',Bio-conversion,124.729Bio-conversion,Liquid,0.597Bio-conversion,Losses,26.862Bio-conversion,Solid,280.322Bio-conversion,Gas,81.144Biofuel imports,Liquid,35Biomass imports,Solid,35Coal imports,Coal,11.606Coal reserves,Coal,63.965Coal,Solid,75.571District heating,Industry,10.639District heating,Heating and cooling - commercial,22.505District heating,Heating and cooling - homes,46.184Electricity grid,Over generation / exports,104.453Electricity grid,Heating and cooling - homes,113.726Electricity grid,H2 conversion,27.14Electricity grid,Industry,342.165Electricity grid,Road transport,37.797Electricity grid,Agriculture,4.412Electricity grid,Heating and cooling - commercial,40.858Electricity grid,Losses,56.691Electricity grid,Rail transport,7.863Electricity grid,Lighting & appliances - commercial,90.008Electricity grid,Lighting & appliances - homes,93.494Gas imports,Ngas,40.719Gas reserves,Ngas,82.233Gas,Heating and cooling - commercial,0.129Gas,Losses,1.401Gas,Thermal generation,151.891Gas,Agriculture,2.096Gas,Industry,48.58Geothermal,Electricity grid,7.013H2 conversion,H2,20.897H2 conversion,Losses,6.242H2,Road transport,20.897Hydro,Electricity grid,6.995Liquid,Industry,121.066Liquid,International shipping,128.69Liquid,Road transport,135.835Liquid,Domestic aviation,14.458Liquid,International aviation,206.267Liquid,Agriculture,3.64Liquid,National navigation,33.218Liquid,Rail transport,4.413Marine algae,Bio-conversion,4.375Ngas,Gas,122.952Nuclear,Thermal generation,839.978Oil imports,Oil,504.287Oil reserves,Oil,107.703Oil,Liquid,611.99Other waste,Solid,56.587Other waste,Bio-conversion,77.81Pumped heat,Heating and cooling - homes,193.026Pumped heat,Heating and cooling - commercial,70.672Solar PV,Electricity grid,59.901Solar Thermal,Heating and cooling - homes,19.263Solar,Solar Thermal,19.263Solar,Solar PV,59.901Solid,Agriculture,0.882Solid,Thermal generation,400.12Solid,Industry,46.477Thermal generation,Electricity grid,525.531Thermal generation,Losses,787.129Thermal generation,District heating,79.329Tidal,Electricity grid,9.452UK land based bioenergy,Bio-conversion,182.01Wave,Electricity grid,19.013Wind,Electricity grid,289.366```
The code above generates the following on the page: