Skip to content

Add Mermaid diagram support to docs.warp.dev with custom Warp branding #515

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
warp-agent-staging wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add Mermaid diagram support to docs.warp.dev with custom Warp branding #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
12a5c18
Add Mermaid diagram support with Warp branding
oz-agent Aug 13, 2026
5aede3d
Apply suggestion from @oz-for-oss[bot]
hongyi-chen Aug 13, 2026
368165b
Rework: fix CI lockfile, relocate example diagram, trim comments
oz-agent Aug 13, 2026
127d36c
Follow-up: fix diagram spacing gap, add zoom/pan/fullscreen controls
oz-agent Aug 13, 2026
a67faac
Follow-up: restyle Mermaid diagram toolbar to match Warp's design system
oz-agent Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @ts-check
import { defineConfig, envField } from 'astro/config';
import remarkGfm from 'remark-gfm';
import mermaid from 'astro-mermaid';
import react from '@astrojs/react';
import sitemap from '@astrojs/sitemap';
import starlight from '@astrojs/starlight';
Expand Down Expand Up @@ -46,6 +47,25 @@ export default defineConfig({
},
},
integrations: [
// Must be registered before starlight() — see astro-mermaid's
// "Integration Order" requirement. `autoTheme` syncs Mermaid's base
// theme with the site's data-theme attribute. Brand colors below are
// literal hex, not `var(--sl-color-*)`: Mermaid computes shades from
// these values at init time and can't parse a CSS custom property.
mermaid({
autoTheme: true,
Comment thread
hongyi-chen marked this conversation as resolved.
Comment thread
warp-agent-staging[bot] marked this conversation as resolved.
enableLog: false,
mermaidConfig: {
fontFamily: "'Inter', 'Inter Fallback', sans-serif",
themeVariables: {
fontFamily: "'Inter', 'Inter Fallback', sans-serif",
// Warp accent blue (--sl-color-accent, dark-theme value).
primaryBorderColor: '#51a6ec',
nodeBorder: '#51a6ec',
lineColor: '#51a6ec',
},
},
}),
react(),
sitemap(),
starlight({
Expand Down
Loading
Loading