TEMPLATE GALLERY

Template Collection

10 categories × 2 slides = 20 templates

数式

表

グラフ

コード

実行

図解

アニメ

レイアウト

タイムライン

比較

数式編 1/2

Basic Formulas

Quadratic Formula $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Euler's Identity $$e^{i\pi} + 1 = 0$$

Matrix Multiplication $$\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} e \\ f \end{pmatrix} = \begin{pmatrix} ae + bf \\ ce + df \end{pmatrix}$$

数式編 2/2

Proof Derivation

Given

\sum_{k=1}^{n} k = \frac{n(n+1)}{2}

Step 1

Base case:

$n=1$: $\sum_{k=1}^{1}k = 1 = \frac{1 \cdot 2}{2}$ ✓

Step 2

Inductive hypothesis: Assume true for

$n$

Step 3

\sum_{k=1}^{n+1}k = \frac{n(n+1)}{2} + (n+1) = \frac{(n+1)(n+2)}{2}

QED

By induction, the formula holds for all $n \geq 1$. ∎

表・データ編 1/2

Styled Data Table

Language	Type System	Speed	Memory Safety	Ecosystem
Rust	Static, strong	★★★★★	★★★★★	★★★☆☆
Go	Static, strong	★★★★☆	★★★☆☆	★★★★☆
Python	Dynamic, strong	★★☆☆☆	★★★☆☆	★★★★★
C++	Static, weak	★★★★★	★★☆☆☆	★★★★☆
TypeScript	Static, structural	★★★☆☆	★★★☆☆	★★★★★

表・データ編 2/2

Status Dashboard

Service	Status	Uptime	Response	Region
API Gateway	● Healthy	99.99%	12ms	us-east-1
Auth Service	● Healthy	99.97%	8ms	us-east-1
Database	● Degraded	99.82%	45ms	us-west-2
Cache	● Healthy	99.99%	2ms	us-east-1
Worker Queue	● Down	98.50%	—	eu-west-1

Last updated: 2025-03-10 14:30 UTC

グラフ編 1/2

Bar & Line Charts

Monthly Revenue

CPU Usage (Live)

グラフ編 2/2

Doughnut & Radar Charts

Language Distribution

Framework Comparison

コード編 1/2

Syntax Highlight & Line Numbers

Rust — HTTP Server

1use tiny_http::Server;
2
3fn main() {
4    let server = Server::http("0.0.0.0:8080")
5        .unwrap();
6    for req in server.incoming_requests() {
7        req.respond(Response::from_string("Hello!"))
8            .unwrap();
9    }
10}

Python — FastAPI

1from fastapi import FastAPI
2
3app = FastAPI()
4
5@app.get("/")
6async def root():
7    return {"message": "Hello!"}

コード編 2/2

Diff View

refactor: improve error handling

12 fn process(input: &str) -> Result<Output> {
13-    let data = parse(input).unwrap();
13+    let data = parse(input)
14+        .context("Failed to parse input")?;
15
16-    let result = transform(data).unwrap();
16+    let result = transform(data)
17+        .with_context(|| format!("Transform failed: {}", input))?;
18
19     Ok(result)
20 }

+4 additions -2 deletions

実行編 1/2

Live Python (Pyodide)

Code Editor

Output

Click "Run Python" to execute...

実行編 2/2

Interactive I/O Demo

Data Processing

Output

Click "Run Python" to execute...

図解編 1/2

Flowchart (Mermaid)

flowchart LR
A[Start] --> B{Authenticated?}
B -->|Yes| C[Dashboard]
B -->|No| D[Login Page]
D --> E[Enter Credentials]
E --> F{Valid?}
F -->|Yes| G[Create Session] --> C
F -->|No| H[Show Error] --> D
C --> I[End]
classDef startNode fill:#00d2ff,color:#0f0f1a
classDef endNode fill:#c3e88d,color:#0f0f1a
classDef errorNode fill:#ff5370,color:#fff
class A startNode
class I endNode
class H errorNode

図解編 2/2

Sequence Diagram

sequenceDiagram
participant C as Client
participant G as API Gateway
participant A as Auth Service
participant D as Database
C->>G: POST /api/login
G->>A: Validate credentials
A->>D: Query user
D-->>A: User record
A-->>G: JWT token
G-->>C: 200 OK + token
Note over C,G: Subsequent requests
C->>G: GET /api/data (Bearer token)
G->>A: Verify JWT
A-->>G: Valid
G->>D: Fetch data
D-->>G: Results
G-->>C: 200 OK + data

アニメーション編 1/2

Counters & Animated Bars

Key Metrics

0

Users

0

Stars

0

Contributors

Market Share (%)

React 42%

Vue 28%

Angular 18%

Svelte 12%

アニメーション編 2/2

Typing Effect

レイアウト編 1/2

Two Column + Card Grid

Left Panel

Main content area with text, lists, or any element.

- Feature overview
- Technical details
- Architecture notes

12K

Downloads

99.9%

Uptime

48

Countries

4.8★

Rating

レイアウト編 2/2

Three Column Features

⚡

Fast

Sub-millisecond response times with zero-copy architecture.

🔒

Secure

Memory-safe by default. No null pointers, no data races.

📦

Portable

Single binary, no runtime. Deploy anywhere.

タイムライン編 1/2

Project Roadmap

Phase 1: Foundation

Core architecture, CLI parsing, Markdown renderer

Jan 2025 — Complete

Phase 2: HTML Mode

HTTP server, browser presentation, navigation injection

Feb 2025 — Complete

Phase 3: Export & Templates

PDF/PPTX/MD export, layout templates, theme system

Mar 2025 — In Progress

Phase 4: Collaboration

Remote control, live sync, speaker notes

Q2 2025 — Planned

タイムライン編 2/2

Step-by-Step Process

1

Plan

Define requirements and architecture

2

Build

Implement features iteratively

3

Test

Validate with unit & integration tests

4

Deploy

Ship to production with CI/CD

比較編 1/2

Before / After

Before: Manual Deploy

$ ssh prod-server
$ cd /var/www/app
$ git pull origin main
$ npm install
$ npm run build
$ pm2 restart all
# 🙏 Hope nothing breaks...

15 min, error-prone, no rollback

After: CI/CD Pipeline

$ git push origin main
# ✅ Tests pass
# ✅ Build succeeds
# ✅ Deployed to staging
# ✅ Health check OK
# ✅ Promoted to production
# 🔄 Auto-rollback on failure

2 min, automated, safe rollback

比較編 2/2

Pros & Cons

Microservices Architecture

✓ Independent deployment per service

✗ Network latency between services

✓ Technology flexibility per team

✗ Complex distributed debugging

✓ Horizontal scaling of hot services

✗ Data consistency challenges

✓ Fault isolation — one crash ≠ all down

✗ Infrastructure overhead (K8s, mesh)