nyyon-figures

nyyon-figures

A local MCP server that renders nyyon's editorial diagrams and featured covers from a spec, without network requests.

Category
Visit Server

README

nyyon-figures

A local MCP server that renders editorial diagrams and featured covers from a spec — for any brand, not just nyyon. No network, no model, nothing leaves the machine — the calling assistant does the thinking, this tool does the drawing.

It ships three things:

  • Templates — 16 parametric, content-agnostic diagram shapes + a 1200×630 featured cover, drawn as code (SVG → PNG via resvg at 2×).
  • Settings — a brand-themeable paper/ink theme with a single accent. Colors, accent, wordmark and URL are all overridable (file or env); it ships with nyyon's look (#6C5CE7, Inter + JetBrains Mono) as the default.
  • Reasoning prompt — how to map an article to a set of figures (which shape per idea, anchored to the sentence it illustrates, varied across the piece) + a cover.

The 16 templates

contrast · layers · cycle · fanout · columns · grid · funnel · timeline · quadrant · pyramid · venn · table · pipeline · radial · bigstat · progression

Each uses the accent as a signal: the FIG. mark, the primary arrowheads, and the single focal "point" of the diagram (the goal node, the source, the winning quadrant, the apex…).

Tools

tool what it does
figures_for_article Start here. Article + a design (auto / all / cover / a template name) → a short brief telling you exactly what to produce, then render. Token-lean: a specific design returns only that template's schema.
list_templates List all templates + the cover with their slot schemas.
get_settings The active theme — colors, fonts, sizes, brand (reflects runtime changes).
set_theme Adjust the global look — colors / fonts / brand — for all later renders.
render_figure { template, slots } → a diagram PNG. Returns the file path.
render_cover { title, kicker?, highlight?, sub?, style? } → the 1200×630 cover PNG.
render_set A whole article set (figures[] + optional cover) in one call.

Two ways to use it

Article → figures:

  1. figures_for_article with the article + design → follow the returned brief to produce the spec.
  2. render_set (or render_cover) → PNGs written locally; embed them, use the cover as featured/OG. Show the renders.

Ad-hoc one-off — just call render_figure directly, e.g. "a venn of X and Y overlapping Z"{ template: "venn", slots: { left_label: "X", right_label: "Y", overlap_label: "Z" } }. No article needed.

Re-theme anytime with set_theme (or env / src/settings.js).

Install (Claude / MCP)

npm install

Then add to your MCP client config:

{
  "mcpServers": {
    "nyyon-figures": { "command": "node", "args": ["/ABSOLUTE/PATH/nyyon-figures/src/index.js"] }
  }
}

Or with the CLI: claude mcp add nyyon-figures -- node /ABSOLUTE/PATH/nyyon-figures/src/index.js

Settings & overrides

Edit src/settings.js, or override at runtime via env:

  • NYYON_FIGURES_ACCENT — accent hex (default #6C5CE7)
  • NYYON_FIGURES_PAPER / NYYON_FIGURES_INK — background / foreground
  • NYYON_FIGURES_BRAND_NAME — wordmark text on the cover (default nyyon)
  • NYYON_FIGURES_BRAND_URL — URL printed on the cover (default nyyon.com)
  • NYYON_FIGURES_BRAND_MARK — SVG path (~64×70 box) for the logo mark; "" = text-only wordmark + plain accent hub
  • NYYON_FIGURES_OUT — directory for rendered PNGs (default $TMPDIR/nyyon-figures)

So a different brand is one line: NYYON_FIGURES_BRAND_NAME='Acme' NYYON_FIGURES_BRAND_URL='acme.io' NYYON_FIGURES_BRAND_MARK='' NYYON_FIGURES_ACCENT='#0EA5E9'.

Test

npm test   # renders one of every template + the cover into tmp-smoke/

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured