How to Generate a Slide Deck with Diagrams, Charts, and Formulas with Gemini 2.5 Flash

As a teacher, are you tired of writing complex formulas for each lesson, or as a marketer, are you spending hours creating data visuals? Well, this post will solve the issues by letting AI do this work for you. Not only does it solve this heavy lifting, but it also reduces time for this. Let's dive deeper into the how-to!

d

Step-by-step Guide

1. Download Visual Studio Code

If you have never installed it, read an specific section for your operating system to install it.

1. Download the Installer

1. Go to the official VS Code website: https://code.visualstudio.com/
2. Click on the "Download for Windows" button.
3. The installer file (e.g., VSCodeUserSetup-x64-*.exe ) will begin downloading.

---

2. Run the Installer

1. Once downloaded, double-click the installer file to run it.
2. Click “Yes” if prompted by the User Account Control (UAC).

---

3. Setup Wizard

1. Read and accept the license agreement, and then click  "Next".
2. Keep the installation location as default, and then click  "Next ."
3. Keep the Start Menu Folder as default, and then click  "Next ."
4. Make sure "Add to PATH" and  "Register Code as an editor for supported file types"  are checked, and then click "Next ."
5. Click "Install."
6. Wait until the installation is finished.

---

4. Launch Visual Studio Code

1. Once the installation completes, make sure  "Launch Visual Studio Code"  is checked and click "Finish ."
2. VS Code will open for the first time.

1. Download Visual Studio Code

1. Go to the official Visual Studio Code website.
2. Click "Download for macOS." Choose the correct version for your Mac (Intel, Apple Silicon, or Universal).

---

2. Open the Installer

1. Find the downloaded .zip or .dmg file in your Downloads folder.
2. Double-click it to extract or mount the installer.

---

3. Install Visual Studio Code

1. Drag the Visual Studio Code.app into your Applications folder.

---

4. Launch VS Code

1. Open the Applications folder and double-click Visual Studio Code.
2. If macOS asks for permission, click Open.

---

5. Add to Dock (Optional)

1. Right-click the Visual Studio Code icon in the Dock.
2. Select Options → Keep in Dock.

---

6. Enable code Command in Terminal (Optional)

1. Open VS Code and press ⌘ + Shift + P to open the Command Palette.
2. Type "Shell Command: Install 'code' command in PATH" and hit Enter.
3. Restart Terminal. You can now use code . to open the current folder in VS Code.

---

7. Install via Homebrew (Alternative)

brew install --cask visual-studio-code

---

8. First Launch and Welcome Screen

Upon launching, you’ll see a Welcome screen with tips, recent projects, and links to install extensions.

---

With these steps, you’ll be fully set up to code on your Mac using Visual Studio Code. Happy coding!

Note: Mac is a trademark of Apple Inc., registered in the U.S. and other countries.

Sources

• Official VS Code macOS Setup Guide
• Homebrew Cask: visual-studio-code
• VS Code Command Line Integration

1. Update your system package index

Before installing anything, it's a good idea to make sure your system's package index is up to date.

sudo apt update

---

2. Install required dependencies

You may need curl and gpg for key management and downloads. Run this command to ensure they’re installed:

sudo apt install software-properties-common apt-transport-https curl gpg

---

3. Import the Microsoft GPG key

This step ensures your system can verify the packages coming from Microsoft’s servers.

curl -sSL https://packages.microsoft.com/keys/microsoft.asc | sudo gpg --dearmor -o /usr/share/keyrings/microsoft.gpg

---

4. Enable the VS Code repository

Add the official Microsoft repository to your list of sources.

echo "deb [arch=amd64 signed-by=/usr/share/keyrings/microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list

---

5. Update packages again to include VS Code

This ensures your system now sees the new repository and available packages.

sudo apt update

---

6. Install Visual Studio Code

You're now ready to install the editor!

sudo apt install code

---

7. Launch Visual Studio Code

You can now start using VS Code by running:

code

Or find it in your applications menu.

Sources

• Official VS Code Linux Setup Documentation
• Microsoft VS Code Repository
• Ubuntu Official Tutorial for VS Code

d

2. Install the "Marp for VS Code" extension

1. Open Visual Studio Code.
2. Click the icon with 4 squares in the left tab bar.
3. Type "Marp for VS Code" in the search bar of the left tab bar.
4. Click the "Marp for VS Code" section.
5. Click "Install."
6. Type >Preferences: Open User Settings in the search bar in the upper center position of the screen, and click "Preferences: Open User Settings."
7. Type markdown.marp.html in the User Setting's search bar.
8. Change the "default" to "all."

3. Set up a Gem on Google Gemini

1. Go to https://gemini.google.com/gems/create.
2. Type "Slide Deck Generator" in the Name section and type the custom instruction below in the Instuructions section.

### Purpose and Aim
   

- To create a copyable slide deck on a given topic.
- To extract the topic
- To provide markdown code in Marp format.
- To add mathematical formulas or Mermaid charts if needed.



### Behaviors and Rules


1. **Information Extraction:** Extract essential information from the given prompt.

''
1. (topic)
2. (audience)
''

2. **Understand the Topic:** Carefully read and comprehend the user's provided topic and audience for the slide deck.
3. **Slide Deck Structure:** Develop the structure of the slide deck, allowing the audience to understand the given topic simply.
4. **Slide Deck Generation:**
  - Write the markdown code for the slide deck in a code block based on the extracted information and desired structure.
  - Adhere strictly to the https://marp.app/ markdown syntax.
  - If you need to visualize data using charts, adhere strictly to the Mermaid syntax explained in the Mermaid syntax PDF files.
  - If you need to visualize data using charts, include the code below in the optional setting on the top.
      ```markdown
      html:true
      ```
  - If you need to use any mathematical formula, adhere strictly to [this article](https://note.com/kiyo_ai_note/n/n47e9657874a9#cb4b44d5-28c3-4074-af93-c12a9b55348c).
    "
      Create a slide deck on (topic) targeting (audience) in Marp format, then provide the code. 

      If you need to visualize data using charts, please definitely use Mermaid in the format below. 

        <style>
          .mermaid { 
            width: 100%; 
            height: 100%;
            background: none;
            border: none
          }

          .mermaid svg {
            display: block;
          }
        </style>
        
        <pre class="mermaid">
          (mermaid code here)
        </pre>

        <script type="module">
          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs'; 
          mermaid.initialize({ startOnLoad: true });
        </script>

  Please note that if you want to know the syntax of Mermaid, please look at Mermaid syntax. PDF files uploaded. 
  
  - If you need to use any mathematical formula, please add it below in an optional setting. 

    "" 
      math: mathjax 
    "" 
    
    Also, enclose the mathematical formula with "$$" if　you　display　it　as　a　block or "$" if you display it in a line, as you can see below.

    $$ 
      [\lim_{n \to \infty} P\left( \left| \frac{1}{n} \sum_{i=1}^n X_i - \mu \right| > \epsilon \right) = 0] 
    $$ 

    Finally, please make sure to follow the user's instructions and check your code using the Mermaid syntax PDF files uploaded. 

5. **Clarity and Conciseness:** Ensure the markdown output is clear, concise, and easy to understand. 
6. **Topic Unclarity Handling:** If the topic is unclear or too broad, politely ask the user for clarification or a more specific topic. 
7. **Continuous Support:** If any error in or further editing of the code is pointed out to you, fix or edit it right away. 



### Overall Tone: 
  

  - Engaging and Impactful 
  - Dynamic and Persuasive 
  - Narrative-Driven 



### Specific Rules 


- If you generate diagrams or charts, please ensure that all the whole parts are visible in the size of the slides. 
- If you generate a flowchart, please arrange each process in a horizontal direction using "LR."  
- For each response, return only full code. 
- When writing code for a Mermaid chart, please make sure to use the format below: 

  <style>
    .mermaid { 
      width: 100%; 
      height: 100%;
      background: none;
      border: none
    }

    .mermaid svg {
      display: block;
    }
  </style>
        
  <pre class="mermaid">
    (mermaid code here)
  </pre>

  <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.min.mjs'; 
    mermaid.initialize({ startOnLoad: true });
  </script>
 
- Don't forget to add ”marp:true” in the optional setting unless the markdown code won't be displayed in Marp format.

3. Go to https://drive.google.com/file/d/1gpoAIhSh6mVKY27Riaa-bWEBvQ03fEBk/view?usp=sharing
4. Click the download button to download the Mermaid syntax zip file.

Source: https://drive.google.com/file/d/1gpoAIhSh6mVKY27Riaa-bWEBvQ03fEBk/view?usp=sharing
5. Unpack the file.
6. Click "+" to upload Mermaid syntax PDFs in the unpacked folder.
7. Click "Save."

4. Generate a slide deck

1. Type the sample idea below into the textbox and execute this prompt.

1. How to integrate Gen AIs into a workflow
2. software engineer

2. Click a button with 2 layered squares to copy the generated code.
3. Go back to Visual Studio Code, and click "File."
4. Click "New File."
5. Type sample.md in the search bar in the upper center position.
6. Save the file in a folder you want to store it in.
7. The saved file will open automatically, and paste the previously generated code.
8. Click the preview button.

Source: Visual Studio Code
9. Click "..." .
10. Click "Refresh Preview."
11. Okay now, your slide is ready on the left side!

5. Export the slide deck

Finally, let's export it for future use.

1. Click the icon with 2 layered rectangles.

Source: Visual Studio Code
2. Click "Export Slide Deck."
3. Now, you have a PDF installed.
4. Change the export option (Optional).
1. Type >Preferences: Open User Settings in the search bar and click "Preferences: Open User Settings."
2. Type markdown.marp.export-type in the search bar.
3. Choose an export option out of pdf, html, pptx, png (the first slide only), or jpeg (the first slide only).

---

Use cases

As a lesson slide deck: streamlining lesson material creation for efficiency and accuracy.

As a marketing material: uploading your company's data and creating a slide deck with a data visual in a few seconds.

As a personalized sales proposal: quickly generating customized sales presentations tailored to potential clients.

---

Troubleshooting

If your slide deck is having some errors, please read this article below.

Also Read

How to Troubleshoot Errors with a Gemini-Made Slide Deck

That's it. You successfully set up a big time-saver. With continuous interaction, you can create a more tailored slide deck.

Sources

Table of Contents – Types, Formats, Examples