@zombie-mermaid/svg-renderer 4.0.0 → 4.2.0

package/src/generated/mono-font-subset.ts

@@ -0,0 +1,32 @@
+/**
+ * GENERATED FILE — do not edit by hand.
+ *
+ * Regenerate with `pnpm run build:mono-font`
+ * (scripts/build-mono-font-subset.ts), which subsets
+ * third_party/fonts/jetbrains-mono-nl/JetBrainsMonoNL-Regular.ttf down to
+ * Basic Latin + Latin-1 Supplement — the self-hosted, embeddable
+ * `@font-face` packages/svg-renderer/src/styles.ts's `buildSvgStyleBlock()` inlines
+ * into an SVG's own `<style>` for its `.mono` rule (class-diagram method
+ * signatures, ER-diagram attribute types), replacing a Google Fonts CDN
+ * `@import` this library's SVG output previously depended on by default
+ * (#1061). See that script's header comment for why this subset is
+ * deliberately narrower than the site's own (demo/components/generated/
+ * mono-font-subset.ts).
+ */
+
+/** The self-hosted family name every consumer's font stack should list
+ * first — matches this subset's own `name` table entry. */
+export const MONO_FONT_FAMILY = 'JetBrains Mono NL'
+
+/** The `@font-face` rule embedding the subset as a base64 `woff2` data
+ * URI — no separate network request, no page-depth-relative path to get
+ * wrong (see the script header comment for why data-URI over a static
+ * asset file). */
+export const MONO_FONT_FACE_CSS = `@font-face {
+  font-family: 'JetBrains Mono NL';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(data:font/woff2;base64,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) format('woff2');
+  unicode-range: U+0020-007E, U+00A0-00FF;
+}`

package/src/index.ts

@@ -62,6 +62,8 @@ export * from './sequence/layout.ts'
 export * from './sequence/renderer.ts'
 export * from './xychart/layout.ts'
 export * from './xychart/renderer.ts'
+export * from './pie/layout.ts'
+export * from './pie/renderer.ts'
 
 import { decodeXML } from 'entities'
 import type {

package/src/layout-engine/edge-bundling.ts

@@ -123,6 +123,45 @@ function adjustJunctionForGroups(
   return crossingGroup.y - GAP // TD
 }
 
+/*
+ * How far an edge end may sit from a node's side and still count as attached
+ * to that side, in px (ELK routes to the box edge; alignment can shift it a
+ * little).
+ */
+const SIDE_TOLERANCE = 2
+
+/**
+ * True when an edge outside the bundle also attaches to `hub` on the side the
+ * bundle would use. Bundling collapses the group onto the side's midpoint, so
+ * an outside edge ending there (a back edge returning to the node, say) would
+ * land on the trunk and read as part of it. ELK's own lanes keep them apart,
+ * so that group is left as routed.
+ *
+ * `side` is the coordinate of the hub's side along the flow axis and
+ * `horizontal` says which axis that is (x for a left-to-right graph).
+ */
+function hasOutsideEdgeOnSide(
+  edges: PositionedEdge[],
+  bundleEdges: Set<PositionedEdge>,
+  hubId: string,
+  side: number,
+  horizontal: boolean,
+): boolean {
+  for (const e of edges) {
+    if (bundleEdges.has(e) || e.source === e.target) continue
+    const end =
+      e.source === hubId
+        ? e.points[0]
+        : e.target === hubId
+          ? e.points[e.points.length - 1]
+          : undefined
+    if (!end) continue
+    if (Math.abs((horizontal ? end.x : end.y) - side) <= SIDE_TOLERANCE)
+      return true
+  }
+  return false
+}
+
 /**
  * Bundle fan-out and fan-in edge paths so they share a common trunk segment.
  *
@@ -193,6 +232,16 @@ export function bundleEdgePaths(
     if (isHorizontal) {
       const exitX = isLR ? source.x + source.width : source.x
       const exitY = srcCY
+      if (
+        hasOutsideEdgeOnSide(
+          edges,
+          new Set(targets.map((t) => t.edge)),
+          sourceId,
+          exitX,
+          true,
+        )
+      )
+        continue
 
       const nearestX = isLR
         ? Math.min(...targets.map((t) => t.node.x))
@@ -229,6 +278,16 @@ export function bundleEdgePaths(
     } else {
       const exitX = srcCX
       const exitY = isBT ? source.y : source.y + source.height
+      if (
+        hasOutsideEdgeOnSide(
+          edges,
+          new Set(targets.map((t) => t.edge)),
+          sourceId,
+          exitY,
+          false,
+        )
+      )
+        continue
 
       const nearestY = isBT
         ? Math.max(...targets.map((t) => t.node.y + t.node.height))
@@ -307,6 +366,16 @@ export function bundleEdgePaths(
     if (isHorizontal) {
       const entryX = isLR ? target.x : target.x + target.width
       const entryY = tgtCY
+      if (
+        hasOutsideEdgeOnSide(
+          edges,
+          new Set(sources.map((s) => s.edge)),
+          targetId,
+          entryX,
+          true,
+        )
+      )
+        continue
 
       const farthestX = isLR
         ? Math.max(...sources.map((s) => s.node.x + s.node.width))
@@ -342,6 +411,16 @@ export function bundleEdgePaths(
     } else {
       const entryX = tgtCX
       const entryY = isBT ? target.y + target.height : target.y
+      if (
+        hasOutsideEdgeOnSide(
+          edges,
+          new Set(sources.map((s) => s.edge)),
+          targetId,
+          entryY,
+          false,
+        )
+      )
+        continue
 
       const farthestY = isBT
         ? Math.min(...sources.map((s) => s.node.y))

package/src/layout-engine/to-elk.ts

@@ -48,6 +48,18 @@ const STATE_MARKER_LAYER_CONSTRAINT: Partial<Record<string, string>> = {
  * Root-graph ELK options applied to state diagrams only (flowcharts keep
  * their tuned defaults).
  *
+ * Flowcharts deliberately do not get `MODEL_ORDER` cycle breaking (#1307).
+ * They already break cycles the way mermaid.js does, by reversing the
+ * depth-first back edges before ELK runs (`edgesReversedForLayout`), so ELK
+ * has no cycle left to break; adding `MODEL_ORDER` on top only moved nodes
+ * away from mermaid.js. Measured against mermaid 11.17.2 (relative placement
+ * of every node pair, `scripts/layout-oracle.ts` style): applied to every
+ * flowchart it changed 5 of the 26 gallery samples and 49 of 104 doc/test
+ * flowcharts, closer for 0 and 2, further for 4 and 41; applied only to
+ * graphs with a subgraph direction override (the one case where the
+ * pre-reversal is skipped) it changed 1 and 7, closer for 0 and 2, further
+ * for 1 and 5.
+ *
  * - `cycleBreaking: MODEL_ORDER` reverses the edge that points *against*
  *   declaration order instead of whichever edge ELK's greedy heuristic picks.
  *   The greedy default reversed the main chain of `[*] --> Idle`,
@@ -570,11 +582,9 @@ export function mermaidToElk(
   // Deliberately scoped to *only* the sibling-subgraph reversal, not a
   // wholesale "all clusters before all leaves" reordering (which mermaid's
   // own mechanism also does, globally): moving the whole subgraphs group
-  // ahead of top-level leaf nodes changed which edge in a cycle ELK treats
-  // as a feedback edge for a sample mixing top-level leaves and a
-  // subgraph in a cyclic flow (e.g. "CI/CD Pipeline"), reordering the
-  // entire rank structure rather than just left-right sibling position —
-  // a much bigger, unreviewed blast radius than the reported bug needs.
+  // ahead of top-level leaf nodes changes which edge in a cycle ELK treats
+  // as a feedback edge. Cycles in a flowchart are broken before ELK sees
+  // them (`edgesReversedForLayout`), so this ordering no longer decides that.
   const stateGraph = isStateGraph(graph)
   const leafCount = rootChildren.length
   // State diagrams read in source order, so composites keep forward

package/src/layout-engine.ts

@@ -30,6 +30,7 @@ import type {
   PositionedGraph,
   FlowchartRenderOptions,
 } from '@zombie-mermaid/core'
+import { withoutOwnClusterEdges } from '@zombie-mermaid/core'
 import { elkLayoutSync } from './elk-instance.ts'
 import { resolveFontSizes } from './styles.ts'
 import { DEFAULTS } from './layout-engine/constants.ts'
@@ -80,9 +81,12 @@ function layoutWithHints(
  * share the engine (state, architecture) keep using `layoutGraphSync`.
  */
 export function layoutFlowchartSync(
-  graph: MermaidGraph,
+  rawGraph: MermaidGraph,
   options: FlowchartRenderOptions = {},
 ): PositionedGraph {
+  // Real mermaid.js draws no line for an edge between a node and a subgraph
+  // containing it (#1310), so it is not laid out or rendered here either.
+  const graph = withoutOwnClusterEdges(rawGraph)
   if (canLayOutFlat(graph)) {
     const fontSizes = resolveFontSizes(options.fontSizes)
     const flat = layoutCompoundFlat(

package/src/pie/layout.ts

@@ -0,0 +1,234 @@
+// ============================================================================
+// Pie chart layout
+//
+// Turns a parsed PieChart into absolute SVG geometry, following Mermaid's own
+// renderer (packages/mermaid/src/diagrams/pie/pieRenderer.ts, default config:
+// textPosition 0.75, no donut hole, legend on the right):
+//
+//   - a 450 x 450 frame with a 40px margin, so the pie radius is 185 and its
+//     centre sits at (225, 225); a 2px outline circle of radius 186 around it
+//   - slices in source order, clockwise from 12 o'clock (d3.pie with
+//     sort(null)); slices under 1% of the total are left out and the rest
+//     share the full circle between them
+//   - each drawn slice labelled with `toFixed(0)` of its share of the
+//     *whole* total (omitted slices included), at 0.75 of the radius
+//   - the title centred over the pie with its baseline 25px from the top
+//   - a legend row for every slice, omitted ones included: an 18px swatch
+//     and the label (or `label [value]` with showData), rows 22px apart,
+//     vertically centred on the pie, starting 216px right of its centre
+//   - width = pie + margin + swatch + gap + longest legend text, widened to
+//     fit a title wider than that
+//
+// Two places differ from Mermaid on purpose, both where Mermaid's output is
+// broken rather than a style choice:
+//   - A legend taller than the 450px frame (more than ~20 rows) grows the
+//     viewBox instead of being clipped at the top and bottom.
+//   - A chart with no slices keeps the pie's own width. Mermaid's width
+//     formula takes Math.max() of an empty list there (-Infinity), which
+//     leaves a viewBox that crops the circle in half.
+//
+// Lengths are kept from Mermaid as-is. Text widths come from this library's
+// own metrics for its own font, not Mermaid's "trebuchet ms".
+// ============================================================================
+
+import type {
+  PieChart,
+  PositionedPieChart,
+  PositionedPieLegendItem,
+  PositionedPieSlice,
+} from '@zombie-mermaid/mermaid-parser'
+import { estimateTextWidth } from '../styles.ts'
+
+/** Mermaid pieRenderer.ts constants (default config and default theme). */
+export const PIE = {
+  /** Frame height; the pie's own width equals it. */
+  height: 450,
+  margin: 40,
+  legendRectSize: 18,
+  legendSpacing: 4,
+  /** `pie.textPosition` default: label distance as a fraction of the radius. */
+  textPosition: 0.75,
+  /** `pieOuterStrokeWidth`; the outline circle sits half of it outside the pie. */
+  outerStrokeWidth: 2,
+  /** `pieTitleTextSize` */
+  titleFontSize: 25,
+  /** `pieSectionTextSize` */
+  sectionFontSize: 17,
+  /** `pieLegendTextSize` */
+  legendFontSize: 17,
+  fontWeight: 400,
+  /** Mermaid's `pie1`..`pie12` scale wraps after this many colours. */
+  paletteSize: 12,
+  /** Slices below this percentage of the total are not drawn. */
+  minPercent: 1,
+} as const
+
+const TAU = Math.PI * 2
+
+/** Round to two decimals for compact path data. */
+function r(n: number): string {
+  return String(Math.round(n * 100) / 100)
+}
+
+/** Point on a circle, angle in radians clockwise from 12 o'clock (d3's convention). */
+function polar(
+  cx: number,
+  cy: number,
+  radius: number,
+  angle: number,
+): { x: number; y: number } {
+  return { x: cx + radius * Math.sin(angle), y: cy - radius * Math.cos(angle) }
+}
+
+/** Wedge path, or a full circle when the slice covers the whole pie. */
+function slicePath(
+  cx: number,
+  cy: number,
+  radius: number,
+  start: number,
+  end: number,
+): string {
+  if (end - start >= TAU - 1e-9) {
+    return (
+      `M${r(cx)},${r(cy - radius)}` +
+      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy + radius)}` +
+      `A${r(radius)},${r(radius)},0,1,1,${r(cx)},${r(cy - radius)}Z`
+    )
+  }
+  const p0 = polar(cx, cy, radius, start)
+  const p1 = polar(cx, cy, radius, end)
+  const large = end - start > Math.PI ? 1 : 0
+  return (
+    `M${r(p0.x)},${r(p0.y)}` +
+    `A${r(radius)},${r(radius)},0,${large},1,${r(p1.x)},${r(p1.y)}` +
+    `L${r(cx)},${r(cy)}Z`
+  )
+}
+
+/** Legend row text, as Mermaid builds it: `String(value)`, no number formatting. */
+function legendText(label: string, value: number, showData: boolean): string {
+  return showData ? `${label} [${String(value)}]` : label
+}
+
+/** Lay out a parsed pie chart. Options are accepted for registry parity; none apply. */
+export function layoutPieChart(
+  chart: PieChart,
+  _options: unknown = {},
+): PositionedPieChart {
+  const height = PIE.height
+  const pieWidth = height
+  const radius = Math.min(pieWidth, height) / 2 - PIE.margin
+  // Everything below is first computed in Mermaid's frame (pie centre at
+  // (225, 225)), then shifted so the viewBox starts at (0, 0).
+  const cx0 = pieWidth / 2
+  const cy0 = height / 2
+
+  const total = chart.slices.reduce((sum, s) => sum + s.value, 0)
+
+  // createPieArcs(): keep slices at or above 1% of the total. A zero total
+  // gives NaN here, which drops every slice, as in Mermaid. (Mermaid filters
+  // a second time on `toFixed(0) !== '0'`, which nothing at or above 1% can
+  // fail, so that step is not repeated.)
+  const drawn = chart.slices
+    .map((slice, index) => ({ slice, colorIndex: index % PIE.paletteSize }))
+    .filter(({ slice }) => (slice.value / total) * 100 >= PIE.minPercent)
+  // d3.pie() spreads the full circle over the slices it is given.
+  const drawnTotal = drawn.reduce((sum, d) => sum + d.slice.value, 0)
+
+  // Legend geometry (Mermaid's 'right' position).
+  const rowHeight = PIE.legendRectSize + PIE.legendSpacing
+  const rowCount = chart.slices.length
+  const legendOffset = (rowHeight * rowCount) / 2
+  const legendX0 = cx0 + 12 * PIE.legendRectSize
+  const legendTexts = chart.slices.map((s) =>
+    legendText(s.label, s.value, chart.showData),
+  )
+  const longestText = Math.max(
+    0,
+    ...legendTexts.map((t) =>
+      estimateTextWidth(t, PIE.legendFontSize, PIE.fontWeight),
+    ),
+  )
+
+  const chartAndLegendWidth =
+    rowCount > 0
+      ? pieWidth +
+        PIE.margin +
+        PIE.legendRectSize +
+        PIE.legendSpacing +
+        longestText
+      : pieWidth + PIE.margin
+
+  const titleText = chart.title ?? ''
+  const titleWidth =
+    titleText.length > 0
+      ? estimateTextWidth(titleText, PIE.titleFontSize, PIE.fontWeight)
+      : 0
+  const titleLeft = cx0 - titleWidth / 2
+  const titleRight = cx0 + titleWidth / 2
+
+  const minX = Math.min(0, titleLeft)
+  const maxX = Math.max(chartAndLegendWidth, titleRight)
+  const legendTop = cy0 - legendOffset
+  const legendBottom =
+    cy0 + (rowCount - 1) * rowHeight - legendOffset + PIE.legendRectSize
+  const minY = rowCount > 0 ? Math.min(0, legendTop) : 0
+  const maxY = rowCount > 0 ? Math.max(height, legendBottom) : height
+
+  const dx = -minX
+  const dy = -minY
+  const cx = cx0 + dx
+  const cy = cy0 + dy
+
+  const slices: PositionedPieSlice[] = []
+  let angle = 0
+  const labelRadius = radius * PIE.textPosition
+  for (const { slice, colorIndex } of drawn) {
+    const start = angle
+    const end = angle + (slice.value / drawnTotal) * TAU
+    angle = end
+    const label = polar(cx, cy, labelRadius, (start + end) / 2)
+    slices.push({
+      label: slice.label,
+      value: slice.value,
+      colorIndex,
+      startAngle: start,
+      endAngle: end,
+      path: slicePath(cx, cy, radius, start, end),
+      percentText: `${((slice.value / total) * 100).toFixed(0)}%`,
+      labelX: label.x,
+      labelY: label.y,
+    })
+  }
+
+  const legend: PositionedPieLegendItem[] = legendTexts.map((text, index) => {
+    const x = legendX0 + dx
+    const y = cy0 + index * rowHeight - legendOffset + dy
+    return {
+      text,
+      colorIndex: index % PIE.paletteSize,
+      x,
+      y,
+      size: PIE.legendRectSize,
+      textX: x + PIE.legendRectSize + PIE.legendSpacing,
+      textY: y + PIE.legendRectSize - PIE.legendSpacing,
+    }
+  })
+
+  return {
+    width: Math.ceil(maxX - minX),
+    height: Math.ceil(maxY - minY),
+    cx,
+    cy,
+    radius,
+    outerRadius: radius + PIE.outerStrokeWidth / 2,
+    title:
+      titleText.length > 0
+        ? { text: titleText, x: cx, y: cy - (height - 50) / 2 }
+        : undefined,
+    slices,
+    legend,
+    accTitle: chart.accTitle,
+    accDescr: chart.accDescr,
+  }
+}

package/src/pie/renderer.ts

@@ -0,0 +1,161 @@
+// ============================================================================
+// Pie chart SVG renderer
+//
+// Draws a PositionedPieChart (see ./layout.ts) in Mermaid's own structure and
+// paint order: outline circle, slices, percentage labels, title, legend.
+//
+// Styling follows Mermaid's pieStyles.ts and default theme, mapped onto this
+// library's CSS custom properties so every theme (and live theme switching
+// through `--bg`/`--fg`/`--accent`) applies:
+//
+//   Mermaid                         here
+//   pie1..pie12                     --pie-color-0..11: the theme accent, then
+//                                   getSeriesColor() shades of it (the same
+//                                   palette xychart series use)
+//   slice opacity 0.7               opacity: 0.7 (on fill and stroke, as there)
+//   pieStrokeColor black, 2px       var(--fg), 2px
+//   pieOuterStrokeColor black, 2px  var(--fg), 2px
+//   title 25px, legend/labels 17px  same sizes, regular weight
+//   text colours (black / #333)     var(--_text)
+//
+// The legend swatch is filled and stroked with the slice colour at full
+// opacity, as in Mermaid. There are no tooltips or hover effects: Mermaid
+// draws none by default (`highlightSlice` is off), so `interactivity` does
+// not change the output.
+// ============================================================================
+
+import type { PositionedPieChart } from '@zombie-mermaid/mermaid-parser'
+import type { DiagramColors, SvgEmitOptions } from '@zombie-mermaid/core'
+import {
+  svgOpenTag,
+  buildStyleBlock,
+  styleOpenTag,
+  escapeXml,
+  escapeAttr,
+} from '@zombie-mermaid/core'
+import {
+  getSeriesColor,
+  CHART_ACCENT_FALLBACK,
+} from '@zombie-mermaid/mermaid-parser'
+import { withDataSrc } from '../renderer.ts'
+import { PIE } from './layout.ts'
+
+function r(n: number): string {
+  return String(Math.round(n * 100) / 100)
+}
+
+/** CSS value for palette slot `index`: slot 0 follows `--accent` live. */
+export function pieColorValue(
+  index: number,
+  accent: string | undefined,
+  bg: string,
+): string {
+  if (index === 0) return `var(--accent, ${CHART_ACCENT_FALLBACK})`
+  return getSeriesColor(index, accent ?? CHART_ACCENT_FALLBACK, bg)
+}
+
+function pieStyles(
+  chart: PositionedPieChart,
+  colors: DiagramColors,
+  nonce?: string,
+): string {
+  const used = new Set<number>()
+  for (const s of chart.slices) used.add(s.colorIndex)
+  for (const l of chart.legend) used.add(l.colorIndex)
+  const indices = [...used].sort((a, b) => a - b)
+
+  const vars = indices.map(
+    (i) =>
+      `    --pie-color-${i}: ${pieColorValue(i, colors.accent, colors.bg)};`,
+  )
+  const rules = indices.map(
+    (i) =>
+      `  .pie-color-${i} { fill: var(--pie-color-${i}); }\n` +
+      `  rect.pie-color-${i} { stroke: var(--pie-color-${i}); }`,
+  )
+  const varsBlock = vars.length > 0 ? `\n  svg {\n${vars.join('\n')}\n  }` : ''
+
+  return `${styleOpenTag(nonce)}
+  .pie-outer { fill: none; stroke: var(--fg); stroke-width: ${PIE.outerStrokeWidth}px; }
+  .pie-slice { stroke: var(--fg); stroke-width: 2px; opacity: 0.7; }
+  .pie-slice-label { fill: var(--_text); font-size: ${PIE.sectionFontSize}px; font-weight: ${PIE.fontWeight}; }
+  .pie-title { fill: var(--_text); font-size: ${PIE.titleFontSize}px; font-weight: ${PIE.fontWeight}; }
+  .pie-legend-text { fill: var(--_text); font-size: ${PIE.legendFontSize}px; font-weight: ${PIE.fontWeight}; }${varsBlock}
+${rules.join('\n')}
+</style>`
+}
+
+/**
+ * Render a positioned pie chart as an SVG string.
+ *
+ * The accessible name is `title` (from `options.title`) when given,
+ * otherwise the chart's own `accTitle`; `accDescr` becomes the root
+ * `<desc>`. Both are dropped when `decorative` is set — see svgOpenTag() in
+ * packages/core/src/theme.ts.
+ */
+export function renderPieSvg(
+  chart: PositionedPieChart,
+  colors: DiagramColors,
+  font: string = 'Inter',
+  transparent: boolean = false,
+  embedSource?: string,
+  title?: string,
+  decorative?: boolean,
+  emit: SvgEmitOptions = {},
+): string {
+  const parts: string[] = []
+
+  parts.push(
+    withDataSrc(
+      svgOpenTag(
+        chart.width,
+        chart.height,
+        colors,
+        transparent,
+        title ?? chart.accTitle,
+        decorative,
+        undefined,
+        emit.styleAttribute,
+        chart.accDescr,
+      ),
+      embedSource,
+    ),
+  )
+  parts.push(buildStyleBlock(font, false, emit.nonce))
+  parts.push(pieStyles(chart, colors, emit.nonce))
+
+  parts.push(
+    `<circle cx="${r(chart.cx)}" cy="${r(chart.cy)}" r="${r(chart.outerRadius)}" class="pie-outer"/>`,
+  )
+
+  for (const s of chart.slices) {
+    parts.push(
+      `<path d="${s.path}" class="pie-slice pie-color-${s.colorIndex}"` +
+        ` data-label="${escapeAttr(s.label)}" data-value="${s.value}"/>`,
+    )
+  }
+
+  for (const s of chart.slices) {
+    parts.push(
+      `<text x="${r(s.labelX)}" y="${r(s.labelY)}" text-anchor="middle" class="pie-slice-label">${escapeXml(s.percentText)}</text>`,
+    )
+  }
+
+  if (chart.title) {
+    parts.push(
+      `<text x="${r(chart.title.x)}" y="${r(chart.title.y)}" text-anchor="middle" class="pie-title">${escapeXml(chart.title.text)}</text>`,
+    )
+  }
+
+  for (const item of chart.legend) {
+    parts.push(
+      `<g class="pie-legend">` +
+        `<rect x="${r(item.x)}" y="${r(item.y)}" width="${item.size}" height="${item.size}" class="pie-legend-swatch pie-color-${item.colorIndex}"/>` +
+        `<text x="${r(item.textX)}" y="${r(item.textY)}" class="pie-legend-text">${escapeXml(item.text)}</text>` +
+        `</g>`,
+    )
+  }
+
+  parts.push('</svg>')
+  return parts.join('\n')
+}