nyyon-figures
A local MCP server that renders nyyon's editorial diagrams and featured covers from a spec, without network requests.
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:
figures_for_articlewith the article +design→ follow the returned brief to produce the spec.render_set(orrender_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 / foregroundNYYON_FIGURES_BRAND_NAME— wordmark text on the cover (defaultnyyon)NYYON_FIGURES_BRAND_URL— URL printed on the cover (defaultnyyon.com)NYYON_FIGURES_BRAND_MARK— SVG path (~64×70 box) for the logo mark;""= text-only wordmark + plain accent hubNYYON_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
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
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.
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.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
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.
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.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
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.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.