Skip to content

Commit 48a6c0c

Browse files
Vanshika-RanaVanshika-Rana
committed
fix: mermaid diagrams, og image
1 parent 132444b commit 48a6c0c

5 files changed

Lines changed: 269 additions & 64 deletions

File tree

‎apps/docs/content/zcp/concept/how-it-works.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ flowchart TD
3939
reachability -->|needs human| blocker
4040
behavior -->|needs human| blocker
4141
42-
classDef user fill:#f7fbff,stroke:#2d72d9,stroke-width:1.5px,color:#172033;
43-
classDef zcpbox fill:#eef7f1,stroke:#32845a,stroke-width:1.5px,color:#172033;
44-
classDef work fill:#fffaf0,stroke:#c47f17,stroke-width:1.5px,color:#172033;
45-
classDef done fill:#f5f3ff,stroke:#7157d9,stroke-width:1.5px,color:#172033;
46-
classDef stop fill:#fff1f2,stroke:#d33f49,stroke-width:1.5px,color:#172033;
42+
classDef user stroke:#2d72d9,stroke-width:1.5px;
43+
classDef zcpbox stroke:#32845a,stroke-width:1.5px;
44+
classDef work stroke:#c47f17,stroke-width:1.5px;
45+
classDef done stroke:#7157d9,stroke-width:1.5px;
46+
classDef stop stroke:#d33f49,stroke-width:1.5px;
4747
4848
class intent user;
4949
class state,scope zcpbox;

‎apps/docs/docusaurus.config.js‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
/* eslint-disable @typescript-eslint/no-var-requires */
22
import "dotenv/config"
3+
import path from "path"
4+
import { fileURLToPath } from "url"
35
import { themes as prismThemes } from "prism-react-renderer"
46
const reverseSidebar = require("./src/utils/reverse-sidebar")
57
const excludeSidebarResults = require("./src/utils/exclude-sidebar-results")
68

9+
const __dirname = path.dirname(fileURLToPath(import.meta.url))
10+
711
const gtagTrackingId = process.env.GTAG_TRACKING_ID
812

913
/** @type {import('@medusajs/docs').MedusaDocusaurusConfig} */
@@ -50,6 +54,14 @@ const config = {
5054
name: "custom-webpack-plugin",
5155
configureWebpack() {
5256
return {
57+
resolve: {
58+
alias: {
59+
"@docusaurus/theme-mermaid/client": path.resolve(
60+
__dirname,
61+
"src/mermaid/client.js"
62+
),
63+
},
64+
},
5365
devServer: {
5466
client: {
5567
overlay: {
@@ -80,23 +92,7 @@ const config = {
8092
light: "base",
8193
dark: "base",
8294
},
83-
options: {
84-
themeVariables: {
85-
background: "#ECEFF3",
86-
mainBkg: "#ECEFF3",
87-
primaryColor: "#ECEFF3",
88-
primaryTextColor: "#030712",
89-
primaryBorderColor: "#D1D5DB",
90-
nodeBorder: "#D1D5DB",
91-
lineColor: "#11181C",
92-
fontFamily: "Inter",
93-
fontSize: "14.75px",
94-
tertiaryColor: "#F3F4F6",
95-
tertiaryBorderColor: "#D1D5DB",
96-
tertiaryTextColor: "#030712",
97-
clusterBkg: "#F3F4F6",
98-
},
99-
},
95+
options: {},
10096
},
10197
image: "img/docs-meta.jpg",
10298
colorMode: {

‎apps/docs/src/css/custom.css‎

Lines changed: 148 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -735,66 +735,175 @@ html[data-theme='dark'] .zcp-claim-card--deploy { background: rgba(76, 29, 149
735735
html[data-theme='dark'] .zcp-claim-card--stack { background: rgba(30, 58, 138, 0.22); border-color: rgba(45, 114, 217, 0.35); }
736736
html[data-theme='dark'] .zcp-claim-card--handover { background: rgba(120, 53, 15, 0.2); border-color: rgba(196, 127, 23, 0.35); }
737737

738-
/* ZCP mermaid flowcharts (how-it-works classDef nodes) */
738+
/* Mermaid diagrams — theme-aware styling */
739739

740-
html[data-theme='dark'] .mermaid .node.user > rect,
741-
html[data-theme='dark'] .mermaid .node.user > polygon,
742-
html[data-theme='dark'] .mermaid .node.user > path {
743-
fill: rgba(30, 58, 138, 0.35) !important;
740+
.docusaurus-mermaid-container {
741+
margin: 1.25rem 0;
742+
}
743+
744+
.docusaurus-mermaid-container svg {
745+
background: transparent !important;
746+
}
747+
748+
/* Edges and arrowheads */
749+
html[data-theme='dark'] .docusaurus-mermaid-container .edgePath path,
750+
html[data-theme='dark'] .docusaurus-mermaid-container .flowchart-link {
751+
stroke: #94a3b8 !important;
752+
}
753+
754+
html[data-theme='dark'] .docusaurus-mermaid-container marker path {
755+
fill: #94a3b8 !important;
756+
stroke: #94a3b8 !important;
757+
}
758+
759+
/* Edge labels (yes / no / etc.) */
760+
html[data-theme='dark'] .docusaurus-mermaid-container .edgeLabel rect,
761+
html[data-theme='dark'] .docusaurus-mermaid-container .edgeLabel .label-container {
762+
fill: #1e293b !important;
763+
}
764+
765+
html[data-theme='dark'] .docusaurus-mermaid-container .edgeLabel span,
766+
html[data-theme='dark'] .docusaurus-mermaid-container .edgeLabel p,
767+
html[data-theme='dark'] .docusaurus-mermaid-container .edgeLabel .label {
768+
color: #e2e8f0 !important;
769+
fill: #e2e8f0 !important;
770+
}
771+
772+
/* Default nodes (diagrams without classDef) */
773+
html[data-theme='light'] .docusaurus-mermaid-container .node.default rect,
774+
html[data-theme='light'] .docusaurus-mermaid-container .node.default polygon,
775+
html[data-theme='light'] .docusaurus-mermaid-container .node.default circle {
776+
fill: #eceff3 !important;
777+
stroke: #d1d5db !important;
778+
}
779+
780+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default rect,
781+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default polygon,
782+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default circle {
783+
fill: rgba(30, 41, 59, 0.92) !important;
784+
stroke: #64748b !important;
785+
}
786+
787+
html[data-theme='light'] .docusaurus-mermaid-container .node.default foreignObject div,
788+
html[data-theme='light'] .docusaurus-mermaid-container .node.default .label,
789+
html[data-theme='light'] .docusaurus-mermaid-container .node.default .nodeLabel {
790+
color: #030712 !important;
791+
}
792+
793+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default foreignObject div,
794+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default .label,
795+
html[data-theme='dark'] .docusaurus-mermaid-container .node.default .nodeLabel {
796+
color: #f8fafc !important;
797+
fill: #f8fafc !important;
798+
}
799+
800+
/* classDef nodes — light mode fills */
801+
html[data-theme='light'] .docusaurus-mermaid-container .node.user rect,
802+
html[data-theme='light'] .docusaurus-mermaid-container .node.user polygon {
803+
fill: #f7fbff !important;
804+
stroke: #2d72d9 !important;
805+
}
806+
807+
html[data-theme='light'] .docusaurus-mermaid-container .node.zcpbox rect,
808+
html[data-theme='light'] .docusaurus-mermaid-container .node.zcpbox polygon {
809+
fill: #eef7f1 !important;
810+
stroke: #32845a !important;
811+
}
812+
813+
html[data-theme='light'] .docusaurus-mermaid-container .node.work rect,
814+
html[data-theme='light'] .docusaurus-mermaid-container .node.work polygon {
815+
fill: #fffaf0 !important;
816+
stroke: #c47f17 !important;
817+
}
818+
819+
html[data-theme='light'] .docusaurus-mermaid-container .node.done rect,
820+
html[data-theme='light'] .docusaurus-mermaid-container .node.done polygon {
821+
fill: #f5f3ff !important;
822+
stroke: #7157d9 !important;
823+
}
824+
825+
html[data-theme='light'] .docusaurus-mermaid-container .node.stop rect,
826+
html[data-theme='light'] .docusaurus-mermaid-container .node.stop polygon {
827+
fill: #fff1f2 !important;
828+
stroke: #d33f49 !important;
829+
}
830+
831+
html[data-theme='light'] .docusaurus-mermaid-container .node.user foreignObject div,
832+
html[data-theme='light'] .docusaurus-mermaid-container .node.zcpbox foreignObject div,
833+
html[data-theme='light'] .docusaurus-mermaid-container .node.work foreignObject div,
834+
html[data-theme='light'] .docusaurus-mermaid-container .node.done foreignObject div,
835+
html[data-theme='light'] .docusaurus-mermaid-container .node.stop foreignObject div,
836+
html[data-theme='light'] .docusaurus-mermaid-container .node.user .label,
837+
html[data-theme='light'] .docusaurus-mermaid-container .node.zcpbox .label,
838+
html[data-theme='light'] .docusaurus-mermaid-container .node.work .label,
839+
html[data-theme='light'] .docusaurus-mermaid-container .node.done .label,
840+
html[data-theme='light'] .docusaurus-mermaid-container .node.stop .label {
841+
color: #172033 !important;
842+
}
843+
844+
/* classDef nodes — dark mode fills */
845+
html[data-theme='dark'] .docusaurus-mermaid-container .node.user rect,
846+
html[data-theme='dark'] .docusaurus-mermaid-container .node.user polygon {
847+
fill: rgba(30, 58, 138, 0.45) !important;
744848
stroke: #60a5fa !important;
745849
}
746850

747-
html[data-theme='dark'] .mermaid .node.zcpbox > rect,
748-
html[data-theme='dark'] .mermaid .node.zcpbox > polygon,
749-
html[data-theme='dark'] .mermaid .node.zcpbox > path {
750-
fill: rgba(20, 83, 45, 0.3) !important;
851+
html[data-theme='dark'] .docusaurus-mermaid-container .node.zcpbox rect,
852+
html[data-theme='dark'] .docusaurus-mermaid-container .node.zcpbox polygon {
853+
fill: rgba(20, 83, 45, 0.4) !important;
751854
stroke: #4ade80 !important;
752855
}
753856

754-
html[data-theme='dark'] .mermaid .node.work > rect,
755-
html[data-theme='dark'] .mermaid .node.work > polygon,
756-
html[data-theme='dark'] .mermaid .node.work > path {
757-
fill: rgba(120, 53, 15, 0.28) !important;
857+
html[data-theme='dark'] .docusaurus-mermaid-container .node.work rect,
858+
html[data-theme='dark'] .docusaurus-mermaid-container .node.work polygon {
859+
fill: rgba(120, 53, 15, 0.38) !important;
758860
stroke: #fbbf24 !important;
759861
}
760862

761-
html[data-theme='dark'] .mermaid .node.done > rect,
762-
html[data-theme='dark'] .mermaid .node.done > polygon,
763-
html[data-theme='dark'] .mermaid .node.done > path {
764-
fill: rgba(76, 29, 149, 0.28) !important;
863+
html[data-theme='dark'] .docusaurus-mermaid-container .node.done rect,
864+
html[data-theme='dark'] .docusaurus-mermaid-container .node.done polygon {
865+
fill: rgba(76, 29, 149, 0.38) !important;
765866
stroke: #a78bfa !important;
766867
}
767868

768-
html[data-theme='dark'] .mermaid .node.stop > rect,
769-
html[data-theme='dark'] .mermaid .node.stop > polygon,
770-
html[data-theme='dark'] .mermaid .node.stop > path {
771-
fill: rgba(127, 29, 29, 0.28) !important;
869+
html[data-theme='dark'] .docusaurus-mermaid-container .node.stop rect,
870+
html[data-theme='dark'] .docusaurus-mermaid-container .node.stop polygon {
871+
fill: rgba(127, 29, 29, 0.38) !important;
772872
stroke: #f87171 !important;
773873
}
774874

775-
html[data-theme='dark'] .mermaid .node.user .label,
776-
html[data-theme='dark'] .mermaid .node.zcpbox .label,
777-
html[data-theme='dark'] .mermaid .node.work .label,
778-
html[data-theme='dark'] .mermaid .node.done .label,
779-
html[data-theme='dark'] .mermaid .node.stop .label {
875+
html[data-theme='dark'] .docusaurus-mermaid-container .node.user foreignObject div,
876+
html[data-theme='dark'] .docusaurus-mermaid-container .node.zcpbox foreignObject div,
877+
html[data-theme='dark'] .docusaurus-mermaid-container .node.work foreignObject div,
878+
html[data-theme='dark'] .docusaurus-mermaid-container .node.done foreignObject div,
879+
html[data-theme='dark'] .docusaurus-mermaid-container .node.stop foreignObject div,
880+
html[data-theme='dark'] .docusaurus-mermaid-container .node.user .label,
881+
html[data-theme='dark'] .docusaurus-mermaid-container .node.zcpbox .label,
882+
html[data-theme='dark'] .docusaurus-mermaid-container .node.work .label,
883+
html[data-theme='dark'] .docusaurus-mermaid-container .node.done .label,
884+
html[data-theme='dark'] .docusaurus-mermaid-container .node.stop .label,
885+
html[data-theme='dark'] .docusaurus-mermaid-container .node.user .nodeLabel,
886+
html[data-theme='dark'] .docusaurus-mermaid-container .node.zcpbox .nodeLabel,
887+
html[data-theme='dark'] .docusaurus-mermaid-container .node.work .nodeLabel,
888+
html[data-theme='dark'] .docusaurus-mermaid-container .node.done .nodeLabel,
889+
html[data-theme='dark'] .docusaurus-mermaid-container .node.stop .nodeLabel {
780890
color: #f8fafc !important;
891+
fill: #f8fafc !important;
781892
}
782893

783-
html[data-theme='dark'] .mermaid .node.user .label span,
784-
html[data-theme='dark'] .mermaid .node.zcpbox .label span,
785-
html[data-theme='dark'] .mermaid .node.work .label span,
786-
html[data-theme='dark'] .mermaid .node.done .label span,
787-
html[data-theme='dark'] .mermaid .node.stop .label span {
788-
color: #f8fafc !important;
894+
/* Inline code inside diagram labels */
895+
html[data-theme='light'] .docusaurus-mermaid-container foreignObject code {
896+
background: rgba(3, 7, 18, 0.06) !important;
897+
color: #172033 !important;
898+
padding: 0.1em 0.35em;
899+
border-radius: 4px;
789900
}
790901

791-
html[data-theme='dark'] .mermaid .node.user .label code,
792-
html[data-theme='dark'] .mermaid .node.zcpbox .label code,
793-
html[data-theme='dark'] .mermaid .node.work .label code,
794-
html[data-theme='dark'] .mermaid .node.done .label code,
795-
html[data-theme='dark'] .mermaid .node.stop .label code {
796-
background: rgba(15, 23, 42, 0.55);
797-
color: #e2e8f0;
902+
html[data-theme='dark'] .docusaurus-mermaid-container foreignObject code {
903+
background: rgba(15, 23, 42, 0.75) !important;
904+
color: #e2e8f0 !important;
905+
padding: 0.1em 0.35em;
906+
border-radius: 4px;
798907
}
799908

800909
/* gap objection cards */

‎apps/docs/src/mermaid/client.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { useState, useEffect, useMemo, useRef } from 'react';
2+
import { useColorMode, useThemeConfig } from '@docusaurus/theme-common';
3+
import mermaid from 'mermaid';
4+
5+
export const MermaidContainerClassName = 'docusaurus-mermaid-container';
6+
7+
const lightThemeVariables = {
8+
background: 'transparent',
9+
mainBkg: '#ECEFF3',
10+
primaryColor: '#ECEFF3',
11+
primaryTextColor: '#030712',
12+
primaryBorderColor: '#D1D5DB',
13+
nodeBorder: '#D1D5DB',
14+
lineColor: '#11181C',
15+
fontFamily: 'Inter',
16+
fontSize: '14.75px',
17+
tertiaryColor: '#F3F4F6',
18+
tertiaryBorderColor: '#D1D5DB',
19+
tertiaryTextColor: '#030712',
20+
clusterBkg: '#F3F4F6',
21+
edgeLabelBackground: '#ffffff',
22+
};
23+
24+
const darkThemeVariables = {
25+
background: 'transparent',
26+
mainBkg: '#1e293b',
27+
primaryColor: '#1e293b',
28+
primaryTextColor: '#f8fafc',
29+
primaryBorderColor: '#64748b',
30+
nodeBorder: '#64748b',
31+
lineColor: '#94a3b8',
32+
fontFamily: 'Inter',
33+
fontSize: '14.75px',
34+
tertiaryColor: '#334155',
35+
tertiaryBorderColor: '#64748b',
36+
tertiaryTextColor: '#f8fafc',
37+
clusterBkg: '#1e293b',
38+
edgeLabelBackground: '#1e293b',
39+
textColor: '#f8fafc',
40+
secondaryColor: '#334155',
41+
secondaryTextColor: '#e2e8f0',
42+
secondaryBorderColor: '#64748b',
43+
};
44+
45+
export function useMermaidThemeConfig() {
46+
return useThemeConfig().mermaid;
47+
}
48+
49+
export function useMermaidConfig() {
50+
const { colorMode } = useColorMode();
51+
const mermaidThemeConfig = useMermaidThemeConfig();
52+
const theme = mermaidThemeConfig.theme[colorMode];
53+
const { options } = mermaidThemeConfig;
54+
55+
return useMemo(() => {
56+
const { themeVariables: _ignored, ...restOptions } = options;
57+
58+
return {
59+
startOnLoad: false,
60+
...restOptions,
61+
theme,
62+
themeVariables:
63+
colorMode === 'dark' ? darkThemeVariables : lightThemeVariables,
64+
};
65+
}, [theme, options, colorMode]);
66+
}
67+
68+
function useMermaidId() {
69+
return useRef(`mermaid-svg-${Math.round(Math.random() * 10000000)}`).current;
70+
}
71+
72+
async function renderMermaid({ id, text, config }) {
73+
mermaid.mermaidAPI.initialize(config);
74+
try {
75+
return await mermaid.render(id, text);
76+
} catch (e) {
77+
document.querySelector(`#d${id}`)?.remove();
78+
throw e;
79+
}
80+
}
81+
82+
export function useMermaidRenderResult({ text, config: providedConfig }) {
83+
const [result, setResult] = useState(null);
84+
const id = useMermaidId();
85+
const defaultMermaidConfig = useMermaidConfig();
86+
const config = providedConfig ?? defaultMermaidConfig;
87+
88+
useEffect(() => {
89+
renderMermaid({ id, text, config })
90+
.then(setResult)
91+
.catch((e) => {
92+
setResult(() => {
93+
throw e;
94+
});
95+
});
96+
}, [id, text, config]);
97+
98+
return result;
99+
}

0 commit comments

Comments
 (0)