blog-mermaid
Blog Mermaid Diagrams
Create mermaid diagrams that match the blog's visual theme.
Color Theme
The blog uses sky as primary and zinc as neutral colors.
| Element | Light Mode | Dark Mode |
|---|---|---|
| Background | white | #020618 |
| Primary fill | sky-100 | sky-900 |
| Secondary fill | zinc-100 | zinc-800 |
| Borders/lines | sky-600 | sky-500 |
| Text | zinc-900 | zinc-100 |
| Accent/highlight | sky-400 | sky-400 |
Diagram Style Guidelines
More from christowles/blog
nuxt-v4
|
24slidev
Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
17fix-blog-images
Fix and optimize images in uncommitted blog posts. Use when preparing blog posts for publication, fixing broken image paths, renaming generic image names (image.png), moving images to proper /images/blog/ directory, improving alt text, or checking image references before committing. Trigger on "fix blog images", "check images", "prepare post for publish", or after pasting screenshots into markdown.
15blog-04-image-prompt
Generate optimized AI image prompts for blog post hero images
14blog-02-write-post
Create a new technical blog post with deep educational value and professional quality
12blog-03-review
Review and improve the blog post draft for clarity, engagement, and authentic voice.
11