Open source · YAML-first · SVG output

Build clean infographics with a simple grammar.

InfoGlee lets you describe content, shapes, and colors in YAML. It renders predictable SVG that you can drop into slides or the web.

Try the YAML See examples

Status: pre-release (alpha). Claims are modest; expect rough edges.

Why InfoGlee

Simple rules. Predictable output. Good enough for production slides.

YAML-first

Describe content and layout in a file you can review and version.

Fast to edit

Change text, shapes, or colors without redrawing anything.

SVG output

Crisp visuals for the web and slides. Export to PNG or PDF if needed.

The grammar (short look)

Content + shape template + color template. That’s it.

Example: SWOT (compact)

version: 1
artboard: { size: { width: 1600, height: 900 } }
theme: { use: themes/corporate }
layout:
  type: grid
  rows: 2
  cols: 2
  gap: 24
  areas:
    - [ s, w ]
    - [ o, t ]
layers:
  - id: s
    body: { $ref: "#/components/card" }
    dataRef: "content.strengths"
  - id: w
    body: { $ref: "#/components/card" }
    dataRef: "content.weaknesses"
  - id: o
    body: { $ref: "#/components/card" }
    dataRef: "content.opportunities"
  - id: t
    body: { $ref: "#/components/card" }
    dataRef: "content.threats"
components:
  card:
    type: shapeBox
    shape: { ref: shapes/rounded-12.svg }
    padding: 20
    content:
      type: stack
      direction: vertical
      items:
        - { type: text, text: "${label}  ${title}", style: "text/title" }
        - { type: text, text: "${description}", style: "text/body" }
content:
  strengths: { label: "S", title: "Strengths", description: "Low churn and strong referrals." }
  weaknesses: { label: "W", title: "Weaknesses", description: "Limited brand awareness." }
  opportunities: { label: "O", title: "Opportunities", description: "Agency partnerships." }
  threats: { label: "T", title: "Threats", description: "New low-price competitor." }

Example: 5-Step Hanging Tags

version: 1
meta: { title: "Hanging Tags (5)" }
artboard: { size: { width: 1200, height: 600 }, padding: 40 }
theme: { use: themes/pastel }
assets:
  shapes: { circleTag: "shapes/circle-tag.svg" }
layout: { type: anchor }
layers:
  - id: steps
    type: stack
    direction: horizontal
    spacing: 16
    items:
      - { $ref: "#/components/tag", props: { n: 1, color: "accent/yellow", text: "Intro" } }
      - { $ref: "#/components/tag", props: { n: 2, color: "accent/pink", text: "Plan" } }
      - { $ref: "#/components/tag", props: { n: 3, color: "accent/peach", text: "Build" } }
      - { $ref: "#/components/tag", props: { n: 4, color: "accent/blue", text: "Review" } }
      - { $ref: "#/components/tag", props: { n: 5, color: "accent/lavender", text: "Ship" } }
components:
  tag:
    type: shapeBox
    shape: { ref: "shapes:circleTag" }
    fill: "role:${color}"
    padding: 16
    content:
      type: stack
      direction: vertical
      items:
        - { type: text, text: "${n}", style: "display/number" }
        - { type: text, text: "${text}", style: "text/body" }

Service

We help you ship templates and themes for your brand. The work is scoped and billed by milestone.

Template setup

We build 1–3 custom templates based on your examples. You get YAML + assets.

Theme pass

Tokens for color, type, spacing, and borders. Accessible by default where possible.

Integration help

We add a CLI step to export SVG/PNG and review your pipeline.

No big promises. We keep scope clear. You know what you get before we start.

Get started

This is an early build. You can try the spec and give feedback.

Install (planned)

# when the package is published
npm i infoglee --save-dev

# render a YAML file to SVG
npx infoglee build examples/swot.yaml -o out.svg

Until publish, you can clone the repo and run the CLI locally.

Contact

Questions or a small project? Send a note.

Email: hello@infoglee.dev

GitHub: coming soon