PPT-SVG Help: Generate Editable PPT SVG Diagrams from Context

Project Overview

PPT-SVG is an open-source tool for creating single-slide presentation visuals. Its goal is not to generate a full slide deck for you. Instead, it solves a more common and more specific problem:

You are already working on a PowerPoint deck, but one slide needs a clean, well-structured, editable flowchart, matrix, timeline, or architecture diagram.

You only need to enter a description and, when necessary, upload existing materials as context. The tool asks AI to generate structured JSON, then a local renderer turns it into SVG. The SVG can be inserted directly into PowerPoint, or converted into shapes inside PowerPoint so you can break it apart, recolor it, edit text, and adjust the layout.

Project repository:

https://github.com/imkcrevit/PPT-SVG

Live demo:

https://labs.graptolite.ai/ppt/

Demo video:

What It Is For

PPT-SVG is best for generating a single presentation diagram, not a complete PowerPoint deck.

Typical use cases include:

• Turn a business process into a flowchart
• Turn a product roadmap, project plan, or release plan into a timeline
• Turn priorities, user segments, or capability distribution into a matrix
• Turn an organization hierarchy, capability levels, or maturity model into a pyramid or layered diagram
• Turn system modules, service relationships, or platform components into an architecture diagram
• Generate a slide-ready visual quickly from content in an existing PPT, Markdown file, or Word document

It is not designed for:

• Generating a complete PowerPoint deck
• Detailed visual design like Figma
• Heavy animation, complex illustration, or brand-level poster design
• Replacing PowerPoint as the final layout tool

More precisely, PPT-SVG is a tool that helps you draw structured diagrams quickly. In most cases, you should still fine-tune the result in PowerPoint so it matches the rest of your slide style.

Why SVG

SVG is friendly to PowerPoint diagrams for four reasons.

First, SVG is a vector format. Text, lines, and arrows stay sharp when scaled, projected, or exported to PDF, instead of becoming blurry like screenshots.

Second, SVG files are usually small and support transparent backgrounds, making them easy to place over slides with different colors or layouts.

Third, PowerPoint can treat SVG as an Office graphic. When deeper editing is needed, you can convert the SVG into shapes and then adjust text, lines, color blocks, and arrows.

Fourth, PPT-SVG uses JSON as an intermediate structure during generation. Compared with generating a non-editable image directly, structured data is easier to regenerate, inspect, partially modify, and debug.

Interface

The PPT-SVG workspace is divided into three areas: conversation generation, preview and JSON, and editing/history.

1. Conversation Panel

The left side is the main input area. You can choose a diagram type, enter your request, upload a context file, and decide whether the next turn should reference the current render.

Built-in diagram types include:

• Other / AI choice: let AI choose the most suitable diagram structure from your description
• Flow: steps, handoffs, lifecycles, approval flows
• Matrix: 2x2 analysis, segmentation, priority decisions
• Timeline: roadmaps, release plans, milestones
• Pyramid: layered structures, funnels, maturity models
• Architecture: system layers, service relationships, platform diagrams

Each conversation supports up to 5 turns. This prevents the context from becoming too long, which can reduce generation quality or waste tokens. If you still do not get a suitable result after 5 turns, start a new conversation and rewrite the requirements you have confirmed into a clearer description.

2. AI Optimize

After entering your request, you can click AI Optimize first. It will not expand your requirements or add new facts. It only makes the wording clearer and more suitable for diagram generation.

AI Optimize is useful when:

• The request is written in a casual style
• Sentences are long and the focus is unclear
• You are worried that AI may not understand the diagram structure
• You want to turn an explanation into a more stable generation prompt

If you have already written a very clear prompt, you can submit it directly without optimization.

3. Context File

You can upload one context file to help AI understand what to draw. Currently supported formats:

• PDF
• Markdown
• DOC / DOCX
• PNG / JPG / JPEG
• PPTX

Markdown, DOCX, and PPTX files are parsed for text context. PDF and image files can also be uploaded as attachments, but for more stable generation you should still add key text in the input box, for example: “Use the three-layer structure in this image and redraw it as a cleaner PPT architecture diagram.”

The maximum size for a single attachment is 12 MB.

4. Reference Current Render

After the first generation, follow-up turns can reference the current render on the right by default. This lets you continue revising in natural language:

• “Keep the current color palette and change step 3 to approval confirmation.”
• “Make the timeline more compact and leave space for notes on the right.”
• “Change the selected modules to a blue palette.”
• “Keep the structure, but shorten the title.”

If you want to generate a completely new diagram, turn off the current render reference or start a new conversation.

5. Preview and JSON

The right side provides two views:

• Preview: view the SVG diagram in real time
• JSON: view and edit the generated structured data

Most users should use the Preview view first. The JSON view is intended for people who are comfortable with structured data and want more precise edits. After editing JSON, click Apply; the system validates the data and re-renders the SVG.

6. Element Editing

After clicking an element in the SVG preview, you can edit it in the right-side panel:

• Text content
• Fill color
• Stroke color

You can also drag-select multiple elements and batch-edit their colors. The tool keeps the latest 3 local edit states, so you can use undo to step back.

This editing capability is meant for lightweight changes. If the structure needs major adjustment, asking AI to regenerate is usually faster.

7. History and Fit Score

After each generation turn, the system saves the corresponding result in the history area. You can look back at previous diagrams and compare which version is more suitable for the current slide.

The fit score indicates how well the current diagram matches the user’s request. It is not an absolute rating, but more of a helper signal. If the structure, text, and spacing are reasonable, the score is usually higher. If the diagram is crowded, missing required content, or drifting away from the request, the score decreases.

Style and Theme Sources

Beyond diagram structure types, PPT-SVG also supports style and theme-source controls for color, background, and local visual direction.

• Default style: white background, restrained business palette, optimized for readability in PPT.
• Uploaded image theme: extracts brand colors from a reference image, while ignoring solid backgrounds, dark UI screenshots, and overly rich images.
• Natural-language theme intent: phrases such as “keep the structure but use a blue-green palette” are merged into the theme configuration.
• Local manual editing: after generation, click elements to change text, fill color, or stroke color; drag-select multiple elements for batch color changes.

If you only want the diagram to match a slide template, the most stable approach is to upload a screenshot or image that contains the brand colors and add: “Only use this for color and simplicity. Do not copy the image content.”

Recommended Workflow

Step 1: Choose a Diagram Type

If you already know what you want to draw, choose the matching type, such as flow, timeline, matrix, or architecture.

If you are not sure, choose Other / AI choice and let AI decide the diagram structure from the content.

Step 2: Enter Context

The more specific your description is, the more stable the result will be. A good prompt usually contains four kinds of information:

• Topic: what the diagram should communicate
• Structure: whether you want a flow, matrix, timeline, or architecture diagram
• Content: which nodes, stages, roles, or modules must appear
• Style: clean, business-oriented, suitable for a white-background PPT, not too complex

Example:

Create a 5-step customer onboarding flow for a white-background PPT slide, from signup, profile completion, first use, value confirmation, to renewal. Keep it clean, avoid long labels, and leave one short note under each step.

Step 3: Upload a File When Needed

If your content already exists in a PPT, Word document, or Markdown file, you can upload it. After uploading, it is still best to explain in the input box which part you want to extract and what kind of diagram you want.

Example:

Use the Q3 product plan from the uploaded PPT and turn it into a horizontal timeline. Keep only the key milestones and do not copy every sentence.

Step 4: Generate and Check the Preview

After clicking Submit, the system goes through several stages:

• Compress context
• Generate SVG JSON
• Validate and repair JSON when necessary
• Render and check the layout
• Save the generated result for this turn

If generation fails, simplify the description, reduce the number of nodes, or start a new conversation.

Step 5: Make Local Edits

After generation, make lightweight edits first:

• Click text and revise wording
• Click a color block and change the fill color
• Click a line or arrow and change the stroke color
• Drag-select multiple elements and apply a unified color

If only a few words are inaccurate, you do not need to regenerate the entire diagram.

Step 6: Download SVG

When the diagram is basically usable, click Download SVG. The downloaded file name will use the generated diagram title when possible.

Step 7: Insert into PowerPoint

There are two ways to use SVG in PowerPoint.

If you only need the graphic to remain sharp:

1. Open PowerPoint
2. Go to the target slide
3. Choose Insert > Pictures > This Device
4. Select the SVG you downloaded
5. Adjust its position and size

If you need to break it apart for further editing:

1. Select the inserted SVG
2. Find Graphics Format in the top toolbar
3. Choose Convert to Shape
4. Confirm the PowerPoint prompt
5. After conversion, you can edit text, colors, lines, and positions like regular Office shapes

PowerPoint menu names may differ slightly between versions. Some versions complete the conversion through Ungroup, while others show Convert to Shape. The core goal is the same: convert the SVG from a single graphic into editable Office shapes.

If you used Link to File or Insert and Link, break the link before sharing the final PPT. Go to File > Info > Edit Links to Files, select the corresponding SVG, and click Break Link. This embeds the graphic in the PPT file so it no longer depends on your local SVG path.

Prompting Tips

1. Specify the Diagram Structure

Avoid:

Draw our product process.

Better:

Create a horizontal 5-step process diagram showing product delivery from requirements collection, solution design, development, acceptance, to launch. Each step should include one short title and one brief note.

2. Control the Number of Nodes

A single-slide PPT diagram should not contain too much content. Suggested limits:

• Flowchart: 3 to 7 steps
• Timeline: 4 to 8 milestones
• Matrix: 4 quadrants, 2 to 4 points per quadrant
• Architecture diagram: 3 to 5 layers, 2 to 5 modules per layer

If there is a lot of content, ask AI to summarize first, then generate the diagram.

3. Specify Text Length

The most common problem in diagrams is text that is too long. You can ask directly:

Keep each node title under 8 Chinese characters and each note under 18 Chinese characters.

Or:

Keep every label under 4 words and avoid long sentences.

4. Explain the Use Case

Tell AI where the diagram will be used. This helps control complexity:

This diagram will be used on one reporting slide. Use a white background, 16:9 layout, restrained business style, and avoid large gradients or complex decoration.

5. Reference the Current Result When Revising

If the previous version is mostly satisfactory, do not describe everything again. Only describe the change:

Keep the current structure. Change the three modules in the second layer to "Data Intake", "Rules Engine", and "Result Output", and move the overall color palette closer to blue-green.

Self-Hosting

If you want to deploy or run it locally yourself, use the open-source repository directly.

git clone https://github.com/imkcrevit/PPT-SVG.git
cd PPT-SVG
npm install
cp .env.example .env.local
npm run dev

Then open:

• http://localhost:3000/zh
• http://localhost:3000/en

Environment variables to configure:

OPENROUTER_API_KEY=your_openrouter_key
OPENROUTER_MODEL=google/gemini-2.5-flash
OPENROUTER_SITE_URL=http://localhost:3000
OPENROUTER_APP_NAME=PPT-SVG
MONGODB_URI=
MONGODB_DB=ppt_svg

Notes:

• OPENROUTER_API_KEY is required for calling OpenRouter
• OPENROUTER_MODEL determines the actual model in use; you can enter model IDs supported by OpenRouter, including Gemini, GPT, DeepSeek, and Claude models
• MONGODB_URI is optional; when configured, it records conversations, attachment paths, and generated artifact information
• Local development does not require Nginx; the Next.js service is enough
• To deploy under a subpath such as /ppt, set NEXT_PUBLIC_BASE_PATH=/ppt during build and runtime

The current version mainly focuses on SVG export. The repository includes backend code related to PPTX export, but PPTX export is not enabled in the V1 main interface yet.

FAQ

What if the generated diagram is too complex?

Reduce the number of nodes and clearly ask it to keep only the key content. For example:

Keep only 5 key nodes. Each node should have at most one short note. Do not expand the details.

What if text overflows or the layout is crowded?

Ask AI to shorten the text, or click the text element and shorten it manually. In PPT diagrams, short words and short phrases are usually more effective than full paragraphs.

What if the result goes in the wrong direction?

If the first turn is already going in the wrong direction, start a new conversation and write a clearer request. Avoid spending too many turns revising a bad direction.

What if the uploaded file still does not capture the key point?

Uploaded files only provide additional context. It is best to explicitly tell AI which page, paragraph, or topic to look at, and what kind of diagram you want it to become.

What if JSON fails?

The system will try to automatically repair JSON returned by the model. If it still fails, the output is usually too long or the structure is too complex. Simplify the request, reduce the number of nodes, and generate again.

What if PowerPoint cannot convert the SVG to shapes?

First confirm that you inserted an SVG file, not a PNG screenshot. If there is no Convert to Shape command in the menu, try right-clicking and using Ungroup, or upgrade to a PowerPoint version that supports converting SVG into Office shapes.