Wireframe: theme support, inline badges, feature-focused E2E fixtures, docs

- Add WireframePalette derived from theme's BackgroundColor, TextColor,
  SubtleTextColor, and AccentColor so all 25 built-in themes work
- Fix inline badge parsing: '(( Badge )) trailing text' now emits
  badge + text wrapped in an implicit row for side-by-side rendering
- Remove diagram.Title from wireframe parser (use ::: HEADER ::: instead)
- Restructure E2E fixtures into 3 feature-focused wireframes:
  wireframe-form (default), wireframe-dashboard (dracula),
  wireframe-showcase (catppuccin-latte)
- Update PRD with Wireframe DSL scope (section 5.3)
- Update README: gallery thumbnails, Wireframe DSL section with component
  syntax table, 'If You Want This' entry, link to markdown-ui-dsl
- Update Build-Gallery.ps1 wireframe label handling

Author: jongalloway

README.md

@@ -12,7 +12,7 @@ Representative snapshot fixtures from the E2E suite. Click any thumbnail to open
 <!-- markdownlint-disable MD033 -->
 <h3>Diagram Types</h3>
 
-DiagramForge currently supports more than a dozen diagram types across Mermaid and the conceptual DSL. This gallery is representative, not complete, and includes a few icon-enabled examples. See [Supported syntax](#supported-syntax) and [Conceptual DSL](#conceptual-dsl) below for the full set and syntax details.
+DiagramForge currently supports more than a dozen diagram types across Mermaid, the Conceptual DSL, and the Wireframe DSL. This gallery is representative, not complete, and includes a few icon-enabled examples. See [Supported syntax](#supported-syntax), [Conceptual DSL](#conceptual-dsl), and [Wireframe DSL](#wireframe-dsl) below for the full set and syntax details.
 
 <table cellpadding="12" width="100%">
   <tr>
@@ -138,6 +138,20 @@ DiagramForge currently supports more than a dozen diagram types across Mermaid a
       <br />
       <sub>Snake Timeline (Dracula)</sub>
     </td>
+    <td align="center" valign="top" width="33%">
+      <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-form.expected.svg">
+        <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-form.expected.svg" alt="Wireframe form dialog" height="96" />
+      </a>
+      <br />
+      <sub>Wireframe Form</sub>
+    </td>
+    <td align="center" valign="top" width="33%">
+      <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-dashboard.expected.svg">
+        <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-dashboard.expected.svg" alt="Wireframe dashboard (Dracula)" height="96" />
+      </a>
+      <br />
+      <sub>Wireframe Dashboard (Dracula)</sub>
+    </td>
   </tr>
 </table>
 
@@ -278,7 +292,7 @@ That's the whole API.
 
 Most diagram-as-code tools assume a browser. Mermaid.js needs a JavaScript engine to run at all — and even once you've stood up headless Chrome and extracted the SVG, you find that it renders text via `<foreignObject>` wrapping HTML `<div>`s instead of native `<text>` elements. That's fine in a web page. It's a blank box in Inkscape, a parse error in Illustrator, and a mess when you try to drop it into a PowerPoint slide. See mermaid-js/mermaid [#2688](https://github.com/mermaid-js/mermaid/issues/2688), [#1845](https://github.com/mermaid-js/mermaid/issues/1845), [#1923](https://github.com/mermaid-js/mermaid/issues/1923), [#2169](https://github.com/mermaid-js/mermaid/issues/2169).
 
-DiagramForge aims lower and hits harder: a **subset** of Mermaid, rendered to **actual** SVG. Flowcharts, block diagrams, sequence diagrams, state diagrams, mindmaps, timelines, Venn diagrams, architecture diagrams, and XY charts — the output opens anywhere.
+DiagramForge aims lower and hits harder: a **subset** of Mermaid, rendered to **actual** SVG. Flowcharts, block diagrams, sequence diagrams, state diagrams, mindmaps, timelines, Venn diagrams, architecture diagrams, XY charts, and low-fidelity wireframes — the output opens anywhere.
 
 - **Real SVG.** Native `<text>` elements. No `<foreignObject>`, no embedded HTML, no CSS-in-SVG. Opens in Inkscape, imports into PowerPoint and Keynote, renders with librsvg.
 - **Pure .NET.** `net10.0`, zero native dependencies, zero runtime package dependencies. No headless browser, no Node, no shelling out.
@@ -316,7 +330,7 @@ string svg = renderer.Render(diagramText);
 File.WriteAllText("out.svg", svg);
 ```
 
-The renderer auto-detects the syntax from the input. No need to tell it whether it's Mermaid or Conceptual DSL.
+The renderer auto-detects the syntax from the input. No need to tell it whether it's Mermaid, Conceptual DSL, or Wireframe DSL.
 
 ### With a custom theme
 
@@ -343,7 +357,7 @@ See [doc/theming.md](doc/theming.md) for the full `Theme` property surface and [
 
 ### With diagram frontmatter
 
-Diagram files can embed a small frontmatter block ahead of Mermaid or Conceptual DSL content:
+Diagram files can embed a small frontmatter block ahead of Mermaid, Conceptual DSL, or Wireframe DSL content:
 
 ```text
 ---
@@ -784,6 +798,7 @@ Rule of thumb: if the diagram is already easy to describe as Mermaid, use Mermai
 | Central concept with surrounding pillars / capabilities (3–8 items) | Conceptual DSL | `diagram: radial\ncenter: Platform\nitems:\n  - Security\n  - Reliability\n  - Observability` |
 | Concentric strategy / segmentation target | Conceptual DSL | `diagram: target\ncenter: Launch\nrings:\n  - Inner ring: Pricing and messaging\n  - Outer ring: Audience reach` |
 | Visual step-by-step journey / snake timeline (3+ steps) | Conceptual DSL | `diagram: snake\ntitle: Journey\nsteps:\n  - Start: Begin here\n  - Middle: Keep going\n  - End: Arrive` |
+| Low-fidelity UI mockup / wireframe sketch | Wireframe DSL | `wireframe: Settings\n::: HEADER :::\n  # Settings\n--- END ---\n[ text: Name ]\n[ Save ](#save)` |
 
 Planned conceptual additions are aimed at presentation-native graphics that Mermaid does not cover idiomatically, such as tree hierarchies / org charts.
 
@@ -919,6 +934,64 @@ steps:
 
 Requires at least 3 steps. Each step follows the format `Label: Description` — the description is optional. Icons use the standard `icon:pack:name` prefix.
 
+### Wireframe DSL
+
+Low-fidelity wireframe diagrams based on the [markdown-ui-dsl](https://github.com/MegaByteMark/markdown-ui-dsl) syntax. The first non-frontmatter line must start with `wireframe`.
+
+DiagramForge implements a focused subset of the DSL — enough to sketch forms, dashboards, and component showcases as static, theme-able SVG.
+
+#### Supported components
+
+| Component | Syntax | Example |
+| --- | --- | --- |
+| Header | `::: HEADER :::`…`--- END ---` | `::: HEADER :::\n  # Page Title\n--- END ---` |
+| Card | `::: CARD: Label :::`…`--- END ---` | `::: CARD: Users :::\n  ## 1,240\n  Total\n--- END ---` |
+| Row layout | `=== ROW ===`…`--- END ---` | `=== ROW ===\n  [ OK ](#ok)\n  [ Cancel ]\n--- END ---` |
+| Button (primary) | `[ Label ](#link)` | `[ Submit ](#save)` |
+| Button (secondary) | `[ Label ]` | `[ Cancel ]` |
+| Text input | `[ text: placeholder ]` | `[ text: Email address ]` |
+| Checkbox | `[x]` / `[ ]` + label | `[x] Accept terms` |
+| Radio button | `(x)` / `( )` + label | `(x) Yearly` |
+| Toggle | `[on]` / `[off]` + label | `[on] Dark Mode` |
+| Dropdown | `[v] Label {options}` | `[v] Country {USA, UK, Canada}` |
+| Tab bar | `\|[ Active ]\| Tab2 \| Tab3 \|` | `\|[ Overview ]\| Settings \|` |
+| Badge (inline) | `(( Label )) text` | `(( New )) 3 notifications` |
+| Heading | `# Heading` or `## Heading` | `# Recent Activity` |
+| Body text | plain text line | `Status: Cannot Reproduce` |
+| Divider | `***` | `***` |
+| Image placeholder | `[ IMG: description ]` | `[ IMG: Profile photo ]` |
+
+#### Example
+
+```text
+wireframe: Settings Dialog
+::: HEADER :::
+  # Preferences
+--- END ---
+[ text: Display name ]
+[v] Theme {Light, Dark, System}
+[x] Send notifications
+( ) Daily digest
+(x) Real-time
+***
+=== ROW ===
+  [ Save ](#save)
+  [ Cancel ]
+--- END ---
+```
+
+All wireframe colors are derived from the active theme's `BackgroundColor`, `TextColor`, `SubtleTextColor`, and `AccentColor`, so every built-in theme (including dark themes) works automatically. Use [frontmatter](#with-diagram-frontmatter) to pick a theme:
+
+```text
+---
+theme: dracula
+---
+wireframe: Dashboard
+::: HEADER :::
+  # Mission Control
+--- END ---
+```
+
 ## Architecture
 
 ```mermaid
@@ -945,7 +1018,7 @@ Parsers produce a syntax-independent `Diagram` (nodes, edges, groups, labels, la
 
 ## Roadmap
 
-See [`doc/prd.md`](doc/prd.md) for the full plan. Short version: more Mermaid diagram types, more conceptual layouts, theme packs, eventually D2 and DOT parsers.
+See [`doc/prd.md`](doc/prd.md) for the full plan. Short version: more Mermaid diagram types, more conceptual layouts, wireframe enhancements, theme packs, eventually D2 and DOT parsers.
 
 For analysis of which SmartArt-style conceptual diagrams are most worth adding next, see [`doc/smartart-analysis.md`](doc/smartart-analysis.md).
 

doc/prd.md

@@ -1,4 +1,5 @@
 # Product Requirements Document (PRD)
+
 ## Project: Markdown‑Driven Diagram Rendering Engine (Text → SVG)
 
 ---
@@ -38,7 +39,7 @@ Clients (e.g., MarpToPptx, Obsidian plugins, CLI tools) are responsible for extr
 - Provide a **pluggable parser architecture** for future syntaxes (e.g., D2, DOT).
 - Remain **independent of any specific client** (Marp, PPTX, web apps, etc.).
 - Support for themes and palletes, both built-in and user supplied.
-- Leverage existing ecosystem. Refer to https://github.com/mermaid-js/mermaid for specification and transpile open source code (with attribution) if possible.
+- Leverage existing ecosystem. Refer to <https://github.com/mermaid-js/mermaid> for specification and transpile open source code (with attribution) if possible.
 
 ### 2.2 Non‑Goals
 
@@ -148,7 +149,26 @@ Examples that remain good candidates for the Conceptual DSL:
 - Radial / hub-and-spoke
 - Pillars / stacked segments
 
-### 5.3 Future Diagram Types (not in v1)
+### 5.3 Wireframe DSL
+
+Low-fidelity wireframe diagrams based on the [markdown-ui-dsl](https://github.com/MegaByteMark/markdown-ui-dsl) syntax. The wireframe parser implements a focused subset of the DSL to render UI mockups as self-contained SVG.
+
+Supported component subset:
+
+- Container primitives: column, row, card, header, footer
+- Form elements: text input, checkbox, radio button, toggle, dropdown
+- Navigation: tab bar (active/inactive states)
+- Content: heading, body text, badge (inline with trailing text), image placeholder, divider
+- Actions: button (primary via link syntax, secondary via plain brackets)
+- Layout: `=== ROW ===` for horizontal arrangement, `::: CARD :::` for grouped content, `***` dividers, indent-based nesting
+
+Selection rule:
+
+- Use the wireframe DSL when the goal is a quick, theme-able, low-fidelity UI sketch inside a slide or document.
+- The wireframe DSL is not a UI framework; it renders static SVG of standard UI widget shapes.
+- All wireframe colors are derived from the four semantic theme properties (`BackgroundColor`, `TextColor`, `SubtleTextColor`, `AccentColor`) via `WireframePalette`, so every built-in theme works out of the box including dark themes.
+
+### 5.4 Future Diagram Types (not in v1)
 
 - D2 subset
 - Architecture diagrams

scripts/Build-Gallery.ps1

@@ -112,7 +112,7 @@ foreach ($file in $svgFiles) {
         $label = Get-FriendlyLabel $themeName
     }
     else {
-        $labelSeed = $fixtureName -replace '^mermaid-', '' -replace '^conceptual-', 'Conceptual '
+        $labelSeed = $fixtureName -replace '^mermaid-', '' -replace '^conceptual-', 'Conceptual ' -replace '^wireframe-', 'Wireframe '
         $label = (($labelSeed -split '-') | ForEach-Object {
                 if ($_.Length -le 2) {
                     $_.ToUpperInvariant()
@@ -124,13 +124,13 @@ foreach ($file in $svgFiles) {
     }
 
     $entries += [PSCustomObject]@{
-        File = $file
-        Width = $width
-        Height = $height
-        Label = $label
-        Theme = $themeName
+        File            = $file
+        Width           = $width
+        Height          = $height
+        Label           = $label
+        Theme           = $themeName
         IsThemeShowcase = $isThemeShowcase
-        Content = (Get-Content -LiteralPath $file.FullName -Raw)
+        Content         = (Get-Content -LiteralPath $file.FullName -Raw)
     }
 }
 

src/DiagramForge/Parsers/Wireframe/WireframeDslParser.cs

@@ -63,9 +63,8 @@ public Diagram Parse(string diagramText)
         if (rawLines.Length == 0)
             throw new DiagramParseException("Diagram text is empty.");
 
-        // Locate the header line ("wireframe [: title]") and parse the optional title.
+        // Locate the header line ("wireframe [: title]") to find where the body starts.
         int startLine = 0;
-        string? title = null;
 
         for (int i = 0; i < rawLines.Length; i++)
         {
@@ -77,14 +76,6 @@ public Diagram Parse(string diagramText)
                 throw new DiagramParseException(
                     "Wireframe DSL must begin with 'wireframe' or 'wireframe: <title>'.");
 
-            int colonPos = trimmed.IndexOf(':', StringComparison.Ordinal);
-            if (colonPos >= 0)
-            {
-                var titlePart = trimmed[(colonPos + 1)..].Trim();
-                if (!string.IsNullOrEmpty(titlePart))
-                    title = titlePart;
-            }
-
             startLine = i + 1;
             break;
         }
@@ -93,8 +84,8 @@ public Diagram Parse(string diagramText)
             .WithSourceSyntax(SyntaxId)
             .WithDiagramType("wireframe");
 
-        if (title is not null)
-            builder.WithTitle(title);
+        // The wireframe declaration line ("wireframe: Title") identifies the diagram
+        // but does not render a visible title. Use ::: HEADER ::: for visual headers.
 
         ParseBody(rawLines, startLine, builder);
 
@@ -147,6 +138,32 @@ private static void ParseBody(string[] lines, int startLine, IDiagramSemanticMod
                 continue;
             }
 
+            // Inline badge+text: "(( Label )) trailing text" → implicit row with badge + text.
+            if (TrySplitInlineBadge(trimmed, out var badgeLabel, out var trailingText))
+            {
+                // Wrap in an implicit row so badge and text render side-by-side.
+                var rowId = $"wf_{nodeCounter++}";
+                var rowNode = new Node(rowId, string.Empty);
+                rowNode.Metadata["wireframe:kind"] = "row";
+                builder.AddNode(rowNode);
+                if (containerStack.TryPeek(out var rp))
+                    AddContainmentEdge(builder, rp, rowId);
+
+                var badgeNode = new Node($"wf_{nodeCounter++}", badgeLabel);
+                badgeNode.Metadata["wireframe:kind"] = "badge";
+                builder.AddNode(badgeNode);
+                AddContainmentEdge(builder, rowId, badgeNode.Id);
+
+                if (!string.IsNullOrWhiteSpace(trailingText))
+                {
+                    var textNode = new Node($"wf_{nodeCounter++}", trailingText);
+                    textNode.Metadata["wireframe:kind"] = "text";
+                    builder.AddNode(textNode);
+                    AddContainmentEdge(builder, rowId, textNode.Id);
+                }
+                continue;
+            }
+
             // Leaf component
             var leaf = ParseLeafComponent(trimmed, $"wf_{nodeCounter++}");
             if (leaf is not null)
@@ -471,6 +488,32 @@ private static bool IsContainerEnd(string line)
         return textNode;
     }
 
+    /// <summary>
+    /// Detects "(( Label )) trailing text" on a single line and splits it into
+    /// a badge label and optional trailing text so the body parser can emit two nodes.
+    /// </summary>
+    private static bool TrySplitInlineBadge(string line, out string badgeLabel, out string trailingText)
+    {
+        badgeLabel = string.Empty;
+        trailingText = string.Empty;
+
+        if (!line.StartsWith("((", StringComparison.Ordinal))
+            return false;
+
+        int closeIdx = line.IndexOf("))", 2, StringComparison.Ordinal);
+        if (closeIdx < 0)
+            return false;
+
+        // Only split when there is content after the closing "))"
+        // (standalone badges are handled by ParseParenComponent).
+        if (closeIdx + 2 >= line.Length)
+            return false;
+
+        badgeLabel = line[2..closeIdx].Trim();
+        trailingText = line[(closeIdx + 2)..].Trim();
+        return badgeLabel.Length > 0;
+    }
+
     private static Node? ParseTabBar(string line, string nodeId)
     {
         // |[ Active ]| Tab2 | Tab3 |