skills.rest
stromy-org
stromy-orgOFFICIAL
Explore all skills by this author →
GitHub

format-diagram

Create branded diagrams from Excalidraw JSON or Mermaid syntax and export as PNG or SVG.

Updated Jun 3, 2026
Search Tags:#branding#mermaid#excalidraw#export#diagram
One-click install
npx skills add https://github.com/stromy-org/stromy-plugin --skill format-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: format-diagram
Source: https://github.com/stromy-org/stromy-plugin/tree/main/skills/format-diagram
Command: npx skills add https://github.com/stromy-org/stromy-plugin --skill format-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the need for branded diagrams in deliverables without the need for additional design tools.

Core Features & Use Cases

  • Branded Diagrams: Generate diagrams like process flows, architecture views, stakeholder maps, and org charts with branded theming.
  • Multiple Outputs: Export diagrams as PNG or SVG for seamless embedding in deliverables.
  • Syntax Support: Works with native Excalidraw JSON and Mermaid syntax.
  • Use Case: When you are asked to create a diagram for a presentation or document, and you need it to reflect the company branding.

Quick Start

Generate a branded diagram for a product roadmap using the Excalidraw JSON input 'product-roadmap.json'.

Frequently Asked Questions about format-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create branded diagrams for consulting deliverables without using separate design tools?▼

To create branded diagrams, you can use Excalidraw JSON or Mermaid syntax inputs combined with brand theming from charter.json and tokens.css, exporting final outputs directly as PNG or SVG files for deliverables.

Can I use Mermaid syntax to generate editable Excalidraw diagrams?▼

Yes, Mermaid syntax is fully supported for diagram generation, allowing you to define process flows and architecture views that are rendered into editable Excalidraw diagrams with applied brand theming.

How do I apply company branding to an Excalidraw diagram export?▼

You apply company branding by reading brand theming configurations from charter.json and tokens.css, which injects defined brand styles directly into the Excalidraw diagram before exporting as PNG or SVG.

What is the best way to export process flow diagrams as SVG for presentations?▼

The best way to export process flow diagrams as SVG is by defining the diagram using Excalidraw JSON or Mermaid syntax, applying brand theming, and selecting SVG as the output format for high-quality presentation embedding.

Does this diagram export workflow support automated creation pipelines?▼

Yes, the workflow supports both manual and automated diagram creation pipelines, allowing programmatic generation of branded diagrams using Excalidraw JSON inputs and exporting them without manual editor intervention.

Why use Excalidraw JSON over Mermaid syntax for diagram generation?▼

Excalidraw JSON provides native editable elements for complex layouts like stakeholder maps, while Mermaid syntax offers faster text-to-diagram generation for standard process flows; both support branded PNG and SVG exports.

Related Skills

Explore More Design & Creative Skills→
OpenCovenOpenCoven
20

brand-voice-generator

Generate brand configuration files defining identity, voice, and visual systems.

Official
Advanced
bwgzbwgz

mermaid-render

Render Mermaid diagrams to PNG, SVG, or PDF with Trimble themes.

Community
Advanced
lifeodysseylifeodyssey
1

excalidraw-skill

Create and edit Excalidraw diagrams on a live canvas via MCP tools.

Community
Advanced
ChatCut-IncChatCut-Inc
751

create-motion-graphics

Create and edit JSX motion graphic assets in ChatCut projects.

Official
Advanced