Starlight Starter Kit: Tailwind + Mermaid

Documentation template powered by Astro Starlight with built-in support for Tailwind CSS v4 and Mermaid diagrams.

Versión en español disponible en README_ES.md

Features

• Astro Starlight Documentation framework with light/dark theme support, sidebar, search, and more.
• Tailwind CSS v4 CSS utilities via @tailwindcss/vite. Customize your design in src/styles/global.css.
• astro-mermaid Render Mermaid diagrams directly in Markdown/MDX files.
  • forest theme with autoTheme (adapts to light/dark mode automatically).
  • basis curve style for flowcharts.
  • Included icon packs: logos and iconoir (via Iconify).
• @mermaid-js/layout-elk ELK layout engine for complex diagrams.

Project Structure

├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   └── docs/
│   │       ├── index.mdx
│   │       ├── guides/
│   │       └── reference/
│   ├── styles/
│   │   └── global.css
│   └── content.config.ts
├── astro.config.mjs
├── bun.lock
├── package-lock.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── package.json
└── tsconfig.json

Starlight picks up .md and .mdx files inside src/content/docs/. Each file is exposed as a route based on its filename.

Using Mermaid

Write diagrams directly in your .md or .mdx files using mermaid code blocks:

```mermaid
flowchart LR
    A[Start] --> B{Condition?}
    B -- Yes --> C[Result A]
    B -- No  --> D[Result B]
```

Commands

All commands are run from the root of the project:

PNPM	Action
pnpm install	Install dependencies
pnpm dev	Start local dev server at localhost:4321
pnpm build	Build the production site to ./dist/
pnpm preview	Preview the build locally before deploying

NPM	Action
npm install	Install dependencies
npm dev	Start local dev server at localhost:4321
npm build	Build the production site to ./dist/
npm preview	Preview the build locally before deploying

BUN	Action
bun install	Install dependencies
bun dev	Start local dev server at localhost:4321
bun build	Build the production site to ./dist/
bun preview	Preview the build locally before deploying

Main Dependencies

Package	Version	Role
astro	^6.0.4	Base framework
@astrojs/starlight	^0.38.1	Documentation theme
@astrojs/starlight-tailwind	^5.0	Starlight + Tailwind integration
tailwindcss	^4.2.1	CSS framework
@tailwindcss/vite	^4.2.1	Vite plugin for Tailwind v4
astro-mermaid	^1.3.1	Mermaid diagram integration
mermaid	^11.13.0	Diagram engine
@mermaid-js/layout-elk	^0.2.1	ELK layout engine for Mermaid

Resources

• Starlight documentation
• Astro documentation
• Tailwind CSS v4
• Mermaid syntax reference