Page diagrams

Quick reference

• To change a figure used on an experience page: edit the matching *Diagrams folder under src/components, not the .mdx page (the page only imports and places the figure).
• To change shared visual style within a folder (spacing, colors, frame look): edit that folder's styles.module.css and its shared helpers (Figure, Box, DashFrame, Segmented, etc.) in that folder's index.js.
• To add a new figure: export a new component from the relevant folder's index.js, then import and place it in the target .mdx page.
• Dashboard mockup data (for example in AwarenessDashboard, DeflectionDashboard, WorkItemSimulator) is illustrative, not real company data. Check the constants near the top of each file before assuming otherwise.

What these are

Each *Diagrams folder under src/components is a set of bespoke inline-SVG figures and small interactive dashboard mockups written for one experience page, not shared, reusable components. They are not registered in src/theme/MDXComponents.js. Each experience .mdx page imports the named exports it needs directly:

import { SourceMap, JoinModel, AwarenessDashboard } from '@site/src/components/AnalyticsDiagrams';

<SourceMap />

They take no props. Each exported component is a self-contained figure with its data baked in. A shared set of internal helpers (Figure, Box, DashFrame, Segmented, etc.) in each folder's index.js keeps the figures in a folder visually consistent, styled by that folder's styles.module.css.

Folder to page map

Component folder	Used by	Exports
AnalyticsDiagrams	src/pages/portfolio/analytics-dashboard-design.mdx	SourceMap, JoinModel, AwarenessDashboard, DeflectionDashboard, ArticleAgeComparison
DocsAsCodeDiagrams	src/pages/portfolio/docs-as-code-standing-it-up.mdx, docs-as-code-contributions.mdx, docs-as-code-customizations.mdx, docs-as-code-linting.mdx, docs-as-code-linting-scripts.mdx	EcosystemMap, LocalDevLoop, ApiDocsFlow, TemplateLayers, PublishPipeline, ContributorPath, AudienceLayers, TwoOnRamps, ReviewModel, ReleaseNotesFlow, PageAnatomy, SingleSourceFlow, MetadataCascade, FeedbackLoop, LintCheckpoints, ValeFlow, StyleCuration, ScriptRoles
RelaunchDiagrams	src/pages/portfolio/help-site-relaunch.mdx	EvidenceToDecisions, HomeBeforeAfter
PaligoZendeskDiagrams	src/pages/portfolio/help-site-relaunch.mdx	IntegrationArchitecture
RosterUploadDiagrams	src/pages/portfolio/ux-writing-data-upload.mdx	UploadScreenBefore, UploadScreenAfter
GuideRewriteDiagrams	src/pages/portfolio/guide-rewrite.mdx	GuideBefore, GuideAfter

Folders used only by archived pages (src/pages/portfolio/_archive/, excluded from the build by the leading underscore) aren't part of the live site, but are kept alongside their page in case that sample gets restored:

Component folder	Used by (archived)	Exports
IntakeDiagrams	_archive/content-intake.mdx	RequestToRootProblem, IntakeFlow, RequestFormMockup
McpDiagrams	_archive/custom-mcps.mdx	McpHub, ManualVsPrompt, TicketPipeline
SkillDiagrams	_archive/ai-agent-skills.mdx	SkillSuite, TieredReading, ReleaseNoteFilter, SubagentFanOut, DocToPaligo, SafeWrites, ReviewStack

Two folders are currently orphaned — not imported by any page, live or archived — and are candidates for deletion or for pairing with a new page:

• ApiDocsDiagrams (TwoApiTypes, RestApiPipeline, EngineApiPipeline, EditionSources) — api-documentation.mdx uses screenshots instead.
• ReleaseNotesDiagrams (TypicalVsAutomated, PipelineMap, WorkItemSimulator) — written for an automated-release-notes.mdx page that was never created.

Source

src/components (folders ending in Diagrams)