slides-to-mermaid

name	slides-to-mermaid
description	Extracts architectural diagrams from Google Slides and converts them into Mermaid.js format (.mmd) and HTML previews. Use when a user asks to convert a slide presentation or a specific slide diagram into Mermaid code.

Google Slides to Mermaid Converter

This skill extracts topological data from Google Slides presentations using gws and a Python script, and uses your (Gemini's) intelligence to translate that geometry into valid Mermaid.js diagrams.

Prerequisites & Setup

If the user is running this for the first time or hits an authorization error with gws, they need to set up OAuth for the Google Slides API.

• Guide them to read references/oauth-setup.md for step-by-step instructions on setting up their GCP project and running gws auth login.

Workflow

When the user asks to convert a slide to Mermaid, follow these steps:

1. Extract Diagram Topology

Google Slides JSON is massive and token-heavy. ALWAYS use the bundled Python script to minify the data before processing it.

If the user provides a Presentation ID and a Slide Page ID:

gws slides presentations pages get --params '{"presentationId": "[PRESENTATION_ID]", "pageObjectId": "[PAGE_ID]"}' | python3 [SKILL_DIR]/scripts/extract_topology.py

If the user provides only a Presentation ID (extract all pages):

gws slides presentations get --params '{"presentationId": "[PRESENTATION_ID]"}' | python3 [SKILL_DIR]/scripts/extract_topology.py

Note: Extract the output of this command into your context window. The script distills the output down to basic shapes, text content, and connecting lines.

2. Generate the Mermaid Diagram

Analyze the minified JSON topology:

1. Identify shape elements and their associated text. The text usually represents node names.
2. Identify line elements and their start and end connections. These represent the directed edges between nodes.
3. Determine the best Mermaid chart type based on the structure (e.g., flowchart TD, sequenceDiagram, architecture). If unspecified by the user, default to flowchart TD.
4. Map the IDs to Mermaid node definitions (e.g., id1[Node Text]).
5. Map the lines to Mermaid edges (e.g., id1 --> id2).

Generate the valid Mermaid string.

3. Output the Files

Write the output to two files in the user's current directory:

1. Create diagram.mmd: Write the raw Mermaid syntax directly to this file.

2. Create preview.html: Read the template from [SKILL_DIR]/assets/preview.html. Replace the %% REPLACE_WITH_MERMAID_CODE %% placeholder with the generated Mermaid syntax. Write the final HTML to preview.html.

4. Finalize

Inform the user that the diagram has been successfully extracted. Provide them with instructions to view the preview.html file in their browser.