pom XML Reference

A compact reference for the pom XML format, designed to be pasted into LLM prompts.

Basics

• Slide size: { w: 1280, h: 720 } (px)
• Colors: 6-digit hex (no # prefix) e.g. FF0000
• Attribute values are written as strings. Numbers and booleans are auto-converted
• Nested object attributes use dot notation (e.g. fill.color="1D4ED8")

Common Attributes (All Nodes)

Layout Nodes

VStack / HStack

Arranges children vertically (VStack) / horizontally (HStack).

<VStack gap="16" alignItems="stretch" justifyContent="start">
  <Text>A</Text>
  <Text>B</Text>
</VStack>

Note: Children of VStack / HStack default to flexShrink=1 (same behavior as CSS Flexbox). Even when combining % widths with gap, children automatically shrink to fit within the parent.

Box

A container that holds exactly one child. Used for adding padding or fixed sizing.

<Box w="50%" padding="20" backgroundColor="FFFFFF">
  <Text>Content</Text>
</Box>

Layer

Positions children using absolute coordinates. Children require x and y. Source order determines stacking.

<Layer w="600" h="400">
  <Shape shapeType="roundRect" x="50" y="50" w="120" h="80" fill.color="1D4ED8" text="A" color="FFFFFF" />
  <Line x1="170" y1="90" x2="300" y2="90" endArrow="true" />
</Layer>

Content Nodes

Text

<Text fontSize="24" bold="true" color="333333" textAlign="center">Title</Text>

Font size guide: Title 28-40 / Heading 18-24 / Body 13-16 / Caption 10-12

Ul (Bullet List)

<Ul fontSize="14" color="333333">
  <Li>Item A</Li>
  <Li>Item B</Li>
  <Li bold="true">Item C (individual style)</Li>
</Ul>

Li attributes (override parent styles): bold, italic, strike, underline, highlight, color, fontSize, fontFamily

Ol (Numbered List)

All Ul attributes plus:

<Ol fontSize="14" numberType="alphaLcPeriod" numberStartAt="3">
  <Li>Item A</Li>
  <Li>Item B</Li>
</Ol>

Image

<Image src="https://example.com/img.png" w="200" h="150" />

Icon

Displays a preset icon (Lucide icon library).

<Icon name="cpu" size="32" color="1D4ED8" />

Available icons: cpu, database, cloud, server, code, terminal, wifi, globe, user, users, contact, briefcase, building, bar-chart, line-chart, pie-chart, trending-up, mail, message-square, phone, video, search, settings, filter, download, upload, share, check, alert-triangle, info, shield, lock, unlock, file, folder, image, calendar, clock, bookmark, arrow-right, arrow-left, arrow-up, arrow-down, external-link, star, heart, zap, target, lightbulb

Shape

<Shape shapeType="roundRect" w="200" h="60" text="Button" fontSize="16" fill.color="1D4ED8" color="FFFFFF" />

Full shapeType list:

Basic shapes: arc, bevel, blockArc, can, chord, corner, cube, decagon, diagStripe, diamond, dodecagon, donut, ellipse, folderCorner, frame, funnel, halfFrame, heptagon, hexagon, homePlate, nonIsoscelesTrapezoid, octagon, parallelogram, pentagon, pie, pieWedge, plaque, plus, rect, roundRect, rtTriangle, trapezoid, triangle

Rounded / snipped rectangles: round1Rect, round2DiagRect, round2SameRect, snip1Rect, snip2DiagRect, snip2SameRect, snipRoundRect

Arrows: bentArrow, bentUpArrow, chevron, circularArrow, curvedDownArrow, curvedLeftArrow, curvedRightArrow, curvedUpArrow, downArrow, leftArrow, leftCircularArrow, leftRightArrow, leftRightCircularArrow, leftRightUpArrow, leftUpArrow, notchedRightArrow, quadArrow, rightArrow, stripedRightArrow, swooshArrow, upArrow, upDownArrow, uturnArrow

Arrow callouts: downArrowCallout, leftArrowCallout, leftRightArrowCallout, quadArrowCallout, rightArrowCallout, upArrowCallout, upDownArrowCallout

Callouts: accentBorderCallout1, accentBorderCallout2, accentBorderCallout3, accentCallout1, accentCallout2, accentCallout3, borderCallout1, borderCallout2, borderCallout3, callout1, callout2, callout3, cloudCallout, wedgeEllipseCallout, wedgeRectCallout, wedgeRoundRectCallout

Stars & banners: doubleWave, ellipseRibbon, ellipseRibbon2, horizontalScroll, irregularSeal1, irregularSeal2, leftRightRibbon, ribbon, ribbon2, star4, star5, star6, star7, star8, star10, star12, star16, star24, star32, verticalScroll, wave

Flowchart: flowChartAlternateProcess, flowChartCollate, flowChartConnector, flowChartDecision, flowChartDelay, flowChartDisplay, flowChartDocument, flowChartExtract, flowChartInputOutput, flowChartInternalStorage, flowChartMagneticDisk, flowChartMagneticDrum, flowChartMagneticTape, flowChartManualInput, flowChartManualOperation, flowChartMerge, flowChartMultidocument, flowChartOfflineStorage, flowChartOffpageConnector, flowChartOnlineStorage, flowChartOr, flowChartPredefinedProcess, flowChartPreparation, flowChartProcess, flowChartPunchedCard, flowChartPunchedTape, flowChartSort, flowChartSummingJunction, flowChartTerminator

Action buttons: actionButtonBackPrevious, actionButtonBeginning, actionButtonBlank, actionButtonDocument, actionButtonEnd, actionButtonForwardNext, actionButtonHelp, actionButtonHome, actionButtonInformation, actionButtonMovie, actionButtonReturn, actionButtonSound

Brackets & braces: bracePair, bracketPair, leftBrace, leftBracket, rightBrace, rightBracket

Math symbols: mathDivide, mathEqual, mathMinus, mathMultiply, mathNotEqual, mathPlus

Others: chartPlus, chartStar, chartX, cloud, cornerTabs, gear6, gear9, heart, lightningBolt, line, lineInv, moon, noSmoking, plaqueTabs, smileyFace, squareTabs, sun, teardrop

Line

<Line x1="100" y1="100" x2="300" y2="100" color="333333" lineWidth="2" endArrow="true" />

Data Visualization Nodes

Table

<Table>
  <TableColumn width="200" />
  <TableColumn width="100" />
  <TableRow>
    <TableCell bold="true" backgroundColor="DBEAFE">Name</TableCell>
    <TableCell bold="true" backgroundColor="DBEAFE">Score</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Alice</TableCell>
    <TableCell>95</TableCell>
  </TableRow>
</Table>

• <TableColumn>: width (omit for equal distribution)
• <TableRow>: height (omit to use defaultRowHeight, default 32)
• <TableCell>: text content + fontSize color bold italic underline strike highlight textAlign backgroundColor colspan rowspan

Chart

<Chart chartType="bar" w="500" h="300" showLegend="true" chartColors='["0088CC","00AA00"]'>
  <ChartSeries name="Sales">
    <ChartDataPoint label="Jan" value="100" />
    <ChartDataPoint label="Feb" value="150" />
  </ChartSeries>
</Chart>

Timeline

<Timeline direction="horizontal" w="1000" h="120">
  <TimelineItem date="Q1" title="Phase 1" description="Foundation" color="4CAF50" />
  <TimelineItem date="Q2" title="Phase 2" description="Development" color="2196F3" />
</Timeline>

<TimelineItem>: date (required) title (required) description color

Matrix

<Matrix w="600" h="500">
  <MatrixAxes x="Cost" y="Impact" />
  <MatrixQuadrants topLeft="Quick Wins" topRight="Strategic" bottomLeft="Low Priority" bottomRight="Avoid" />
  <MatrixItem label="Initiative A" x="0.2" y="0.8" color="4CAF50" />
  <MatrixItem label="Initiative B" x="0.7" y="0.6" />
</Matrix>

• Coordinates: (0,0) = bottom-left, (1,1) = top-right (mathematical coordinate system)
• <MatrixAxes>: x y (axis labels, required)
• <MatrixQuadrants>: topLeft topRight bottomLeft bottomRight
• <MatrixItem>: label x y (required) color

Tree

<Tree layout="vertical" nodeShape="roundRect" w="600" h="400">
  <TreeItem label="CEO" color="1D4ED8">
    <TreeItem label="CTO" color="0EA5E9">
      <TreeItem label="Engineer A" />
    </TreeItem>
    <TreeItem label="CFO" color="16A34A" />
  </TreeItem>
</Tree>

<TreeItem> can be recursively nested. Only one root allowed.

Flow

<Flow direction="horizontal" w="500" h="300">
  <FlowNode id="start" shape="flowChartTerminator" text="Start" color="4CAF50" />
  <FlowNode id="process" shape="flowChartProcess" text="Process" />
  <FlowNode id="decision" shape="flowChartDecision" text="OK?" color="FF9800" />
  <FlowNode id="end" shape="flowChartTerminator" text="End" color="E91E63" />
  <FlowConnection from="start" to="process" />
  <FlowConnection from="process" to="decision" />
  <FlowConnection from="decision" to="end" label="Yes" />
</Flow>

<FlowNode> attributes:

<FlowConnection>: from to (required) label color

ProcessArrow

<ProcessArrow direction="horizontal" w="1000" h="80">
  <ProcessArrowStep label="Plan" color="4472C4" />
  <ProcessArrowStep label="Design" color="5B9BD5" />
  <ProcessArrowStep label="Develop" color="70AD47" />
  <ProcessArrowStep label="Release" color="ED7D31" />
</ProcessArrow>

<ProcessArrowStep>: label (required) color (default: 4472C4) textColor (default: FFFFFF)

Pyramid

<Pyramid direction="up" w="600" h="300">
  <PyramidLevel label="Strategy" color="E91E63" />
  <PyramidLevel label="Tactics" color="9C27B0" />
  <PyramidLevel label="Execution" color="673AB7" />
</Pyramid>

<PyramidLevel>: label (required) color (default: 4472C4) textColor (default: FFFFFF)

• direction="up": First PyramidLevel is the apex (narrowest), last is the base (widest)
• direction="down": First PyramidLevel is the top (widest), last is the bottom (narrowest)

Child Element Tag Reference

When the same property is specified via both attributes (JSON string) and child elements, child elements take precedence.

Slide Patterns

Basic Structure

<VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
  <Text fontSize="32" bold="true">Title</Text>
  <Text fontSize="14">Body text</Text>
</VStack>

Two-Column Layout

<VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
  <Text fontSize="28" bold="true">Title</Text>
  <HStack gap="24" alignItems="start">
    <Box w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8">
      <Text fontSize="14">Left column</Text>
    </Box>
    <Box w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8">
      <Text fontSize="14">Right column</Text>
    </Box>
  </HStack>
</VStack>

Notes

• Colors do not need # prefix (FF0000)
• alignItems / justifyContent use start / end (not left / right)
• Box accepts exactly one child (not an array)
• Property names are w / h (not width / height)
• Children of Layer require x and y
• Tree must have exactly one root <TreeItem>