Complete Guide: Images, Tables & Diagrams

This post demonstrates how to add various media types to your blog posts.

📸 Adding Images

1. Regular Images

First, save your image in /public/images/ folder, then reference it:

1![Image description](/images/your-image.png)

Example:

2. Images with Links

You can make images clickable:

1[![Alt text](/images/image.png)](https://example.com)

3. Image Best Practices

• Save images in /public/images/
• Use .png for diagrams/screenshots
• Use .jpg for photos
• Optimize images before uploading (use tools like TinyPNG)
• Use descriptive alt text for accessibility

📊 Tables

Tables are easy with Markdown syntax:

| Feature | Status | Priority | | -------------- | -------------- | -------- | | Authentication | ✅ Complete | High | | API Gateway | 🚧 In Progress | High | | Monitoring | ❌ Not Started | Medium | | Documentation | ✅ Complete | Low |

Complex Table Example

| Service | Before | After | Savings | Notes | | --------- | --------- | --------- | ------- | --------------------- | | EC2 | $280K | $70K | 75% | Right-sized instances | | RDS | $120K | $50K | 58% | Consolidated replicas | | S3 | $20K | $12K | 40% | Lifecycle policies | | Total | $420K | $132K | 69% | Annual savings |

🏗️ Architecture Diagrams

Option 1: Image Files

Create diagrams in tools like:

• Excalidraw (https://excalidraw.com)
• Draw.io (https://draw.io)
• Lucidchart
• Figma

Then export as PNG/SVG and add to /public/images/:

1![Architecture Diagram](/images/architecture.png)

Option 2: ASCII Diagrams

┌─────────────┐
│   Client    │
└──────┬──────┘
       │
       ▼
┌─────────────┐     ┌─────────────┐
│  API Gateway│────▶│  Backend    │
└─────────────┘     └──────┬──────┘
                           │
                           ▼
                    ┌─────────────┐
                    │  Database   │
                    └─────────────┘

Option 3: Mermaid Diagrams (Future Enhancement)

1graph TD
2    A[Client] --> B[Load Balancer]
3    B --> C[Web Server 1]
4    B --> D[Web Server 2]
5    C --> E[Database]
6    D --> E[Database]

📝 Code with Comments

You can add inline comments in code blocks:

1apiVersion: v1
2kind: Service
3metadata:
4  name: my-app
5  labels:
6    app: my-app
7spec:
8  type: LoadBalancer # Exposes service externally
9  ports:
10    - port: 80
11      targetPort: 8080 # Container port
12  selector:
13    app: my-app # Matches pods with this label

📋 Lists with Images

1. Step 1: Create your image

   

2. Step 2: Upload to /public/images/

3. Step 3: Reference in markdown

💡 Callouts with Different Types

🎯 Complete Workflow

Step-by-Step: Adding an Image

1. Create/Get your image

   • Screenshot
   • Diagram from Excalidraw
   • Photo

2. Save to project

   1# Save image to this folder:
   2/public/images/my-diagram.png

3. Reference in your blog post

   1![My Diagram](/images/my-diagram.png)

4. That's it!

   • Save the MDX file
   • Refresh browser
   • Image appears in your blog

📦 File Organization

blog_website/
├── content/posts/
│   └── my-post.mdx           # Your blog post
├── public/
│   └── images/
│       ├── kubernetes.png     # Your images here
│       ├── architecture.png
│       └── screenshot.jpg

🖼️ Image in Different Sections

Hero Image (Top of post)

Set in front-matter:

1---
2coverImage: "/images/hero.svg"
3---

Inline Images

Add anywhere in content:

1![Description](/images/inline.png)

Side-by-Side Images

1<div style="display: flex; gap: 1rem;">
2
3![Image 1](/images/img1.png)
4![Image 2](/images/img2.png)
5
6</div>

✅ Quick Reference

| Element | Syntax | | ------- | ------------------------------------- | | Image | ![Alt text](/images/file.png) | | Table | \| Col1 \| Col2 \| | | Callout | <Callout type="info">Text</Callout> | | Code | ```language | | Heading | ## Heading | | Bold | **text** | | Italic | *text* | | Link | [text](url) |

---

That's all you need to know! Now you can create rich, visually appealing blog posts with images, diagrams, and tables. 🎉