mfec-pptx-diagram

Convert Mermaid diagrams into editable PowerPoint slides on the MFEC branded template via officecli.

1|Updated Jul 22, 2026
One-click install
npx skills add https://github.com/thititongumpun/skills --skill mfec-pptx-diagram-thititongumpun
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mfec-pptx-diagram
Source: https://github.com/thititongumpun/skills/tree/main/skills/mfec-pptx-diagram
Command: npx skills add https://github.com/thititongumpun/skills --skill mfec-pptx-diagram-thititongumpun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires officecli, and includes assets (resource) components.

What problem does it solve? Turning a Mermaid diagram into a branded, editable PowerPoint slide normally means hand-placing shapes and connectors, losing the template's fonts and colours, and shipping decks with clipped diagrams or leftover placeholder text. This Skill drives officecli to render Mermaid natively into the MFEC template, then annotates, animates, and verifies the result. ## Core Features & Use Cases - Native Mermaid rendering: Inserts flowcharts and sequence diagrams as real editable PowerPoint shapes and connectors inside the MFEC branded template, with an image-render fallback for other Mermaid types. - Role-based annotation: The bundled annotate.py colours nodes by category, adds unboxed captions, and draws a legend, while flow-motion.py animates a marker travelling between nodes since PowerPoint cannot animate shapes inside a group. - Layout verification: check-layout.py catches off-slide diagrams, overlapping shapes, in-diagram label collisions, and text boxes that silently grow past the slide edge — failures that officecli's own issue report cannot see. - Use Case: An engineer needs to present a Kafka versus RabbitMQ architecture decision. The Skill clones the template's diagram slide, renders the flowchart, colours streams and tables by role with a legend, animates a packet along the route, and adds the comparison table and takeaway slides around it. ## Quick Start Ask the agent to turn your Mermaid flowchart into an editable slide in an MFEC-branded PowerPoint deck, with nodes colour-coded by role and a legend.

Frequently Asked Questions about mfec-pptx-diagram

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

FAQPage Schema
How do I convert a Mermaid diagram to an editable PowerPoint slide?

Use officecli's add command with --type diagram and --prop render=native, passing the Mermaid source inline or from a file. Native rendering produces real editable shapes and connectors, but only supports flowchart and sequenceDiagram types.

Which Mermaid diagram types can render as editable PowerPoint shapes?

Only flowchart/graph and sequenceDiagram render natively as editable shapes. Other types like gantt, pie, class, state, or er diagrams must use render=image, which embeds a PNG via headless Chrome and is not editable.

Why are classDef and style colours ignored in my PowerPoint diagram?

The native renderer silently drops classDef and style directives from Mermaid source, so every node gets the default fill. Colours must be applied afterwards on the shapes, which is what the bundled annotate.py script does with its --role flag.

Can I animate nodes inside a PowerPoint diagram group?

No, PowerPoint refuses to animate shapes inside a group, and a native diagram is a group. The workaround is a separate top-level marker shape with motion-path legs, which the bundled flow-motion.py script creates automatically.

Why does my PowerPoint text box overflow without any error reported?

Template text boxes use autoFit=shape, so PowerPoint grows the box to fit text and officecli's issue check skips them entirely. The bundled check-layout.py measures the real required height by disabling autoFit on a copy and reports overfull boxes.

What dependencies does the Mermaid to PowerPoint workflow require?

officecli is a hard dependency with no fallback, installed via npm with the allow-scripts flag so its binary downloads. The bundled helper scripts need python3, and a headless browser is optional for image rendering and screenshots.