SynthDiagram

Pre-generated SVG diagram embed for synth-keyword articles (sub-packages/synth-svg output) — auto-prefixes a bare filename with /images/synth-svg/.

Article Media & Embeds

With caption

Without caption

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for SynthDiagram — new coverage (epic #1647, wave 6, #1662). // // Fidelity note: SynthDiagram renders a pre-generated static SVG from // /images/synth-svg/ (produced by the sub-packages/synth-svg CLI, not the // image pipeline) — the src below is a placeholder filename that doesn't // exist in this styleguide fixture set, so the <img> shows a broken-image // icon rather than a real diagram. The component itself is fully SSR-safe // (a plain <img>, no client-only rendering) — only the referenced asset is a // stand-in. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SynthDiagram } from './synth-diagram'; const meta: StoryMeta = { title: 'SynthDiagram', category: 'Article Media & Embeds', description: 'Pre-generated SVG diagram embed for synth-keyword articles (sub-packages/synth-svg output) — auto-prefixes a bare filename with /images/synth-svg/.', usage: `import { SynthDiagram } from '@/components/mdx/synth-diagram';\n\n<SynthDiagram src="vco-basic.svg" alt="VCO block diagram" caption="基本的なVCOの構成" />`, }; export default meta; export const WithCaption = defineStory({ name: 'With caption', render: () => ( <div className="max-w-[500px]"> <SynthDiagram src="vco-basic-diagram.svg" alt="VCOの基本構成図" caption="基本的なVCOの構成 — 波形選択とCV入力" /> </div> ), }); export const WithoutCaption = defineStory({ name: 'Without caption', render: () => ( <div className="max-w-[500px]"> <SynthDiagram src="adsr-envelope-diagram.svg" alt="ADSRエンベロープの波形図" /> </div> ), });