# jikan-me/website architecture

> Architecture diagram of the GitHub repository jikan-me/website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jikan-me/website
- Repository: https://github.com/jikan-me/website

## Overview

This repository is the SvelteKit website for Jikan, an unofficial MyAnimeList API; it is not the API implementation itself. Visitors can explore API capabilities and request examples, find community wrappers, and browse projects built with Jikan. The source index and excerpts support the page composition, demo fetch, and showcase rendering; other landing-page component wiring is based on imports named in the index. The API is an external service, and this site does not provide authenticated MyAnimeList actions.

Main entry points: [`src/routes/+page.svelte`](https://github.com/jikan-me/website/blob/master/src/routes/%2Bpage.svelte) (Landing page), [`src/routes/showcase/+page.svelte`](https://github.com/jikan-me/website/blob/master/src/routes/showcase/%2Bpage.svelte) (Showcase page), [`src/lib/components/Nav.svelte`](https://github.com/jikan-me/website/blob/master/src/lib/components/Nav.svelte) (Navigation), [`src/lib/components/Footer.svelte`](https://github.com/jikan-me/website/blob/master/src/lib/components/Footer.svelte) (Footer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Website pages"]
  node_home["Landing page<br/>[+page.svelte]"]
  node_showcase_page["Showcase page<br/>[+page.svelte]"]
end

subgraph group_content["Site content"]
  node_features_data["Feature content<br/>[features.js]"]
  node_integrations_data["Wrapper directory<br/>[integrations.js]"]
  node_showcase_data["Showcase entries<br/>[showcase.js]"]
  node_supporters_data["Supporter data<br/>[supporters.js]"]
end

subgraph group_ui["UI components"]
  node_nav["Navigation<br/>[Nav.svelte]"]
  node_footer["Footer<br/>[Footer.svelte]"]
  node_button["Button<br/>[Button.svelte]"]
  node_chip["Chip<br/>[Chip.svelte]"]
  node_divider["Divider<br/>[Divider.svelte]"]
  node_integration_card["Integration card"]
  node_showcase_card["Showcase card"]
  node_marquee["Supporter marquee<br/>[Marquee.svelte]"]
  node_heartbeat["MAL heartbeat"]
end

subgraph group_demo["API demo"]
  node_request_demo["Request examples"]
  node_anime_card["Anime result card<br/>[AnimeCard.svelte]"]
end

node_visitor(("Site visitor"))
node_jikan_api{{"Jikan REST API"}}

node_visitor -->|"opens"| node_home
node_visitor -->|"browses"| node_showcase_page
node_home -->|"renders"| node_nav
node_home -->|"renders"| node_footer
node_home -->|"uses content"| node_features_data
node_home -->|"uses content"| node_integrations_data
node_home -->|"renders"| node_integration_card
node_home -->|"renders"| node_marquee
node_home -->|"renders"| node_request_demo
node_showcase_page -->|"renders"| node_nav
node_showcase_page -->|"renders"| node_footer
node_showcase_page -->|"loads entries"| node_showcase_data
node_showcase_page -->|"renders entries"| node_showcase_card
node_nav -->|"uses"| node_button
node_nav -->|"uses"| node_chip
node_footer -->|"uses"| node_button
node_footer -->|"renders"| node_heartbeat
node_integration_card -->|"uses"| node_chip
node_integration_card -->|"uses"| node_divider
node_showcase_card -->|"uses"| node_chip
node_marquee -->|"reads"| node_supporters_data
node_request_demo -->|"fetches examples"| node_jikan_api
node_request_demo -->|"renders results"| node_anime_card
node_anime_card -->|"uses"| node_chip
node_anime_card -->|"uses"| node_divider

click node_home "https://github.com/jikan-me/website/blob/master/src/routes/%2Bpage.svelte"
click node_showcase_page "https://github.com/jikan-me/website/blob/master/src/routes/showcase/%2Bpage.svelte"
click node_features_data "https://github.com/jikan-me/website/blob/master/src/data/features.js"
click node_integrations_data "https://github.com/jikan-me/website/blob/master/src/data/integrations.js"
click node_showcase_data "https://github.com/jikan-me/website/blob/master/src/data/showcase.js"
click node_supporters_data "https://github.com/jikan-me/website/blob/master/src/data/supporters.js"
click node_nav "https://github.com/jikan-me/website/blob/master/src/lib/components/Nav.svelte"
click node_footer "https://github.com/jikan-me/website/blob/master/src/lib/components/Footer.svelte"
click node_button "https://github.com/jikan-me/website/blob/master/src/lib/components/Button.svelte"
click node_chip "https://github.com/jikan-me/website/blob/master/src/lib/components/Chip.svelte"
click node_divider "https://github.com/jikan-me/website/blob/master/src/lib/components/Divider.svelte"
click node_integration_card "https://github.com/jikan-me/website/blob/master/src/lib/components/IntegrationCard.svelte"
click node_showcase_card "https://github.com/jikan-me/website/blob/master/src/lib/components/ShowcaseCard.svelte"
click node_marquee "https://github.com/jikan-me/website/blob/master/src/lib/components/Marquee.svelte"
click node_heartbeat "https://github.com/jikan-me/website/blob/master/src/lib/components/MalHeartBeat.svelte"
click node_request_demo "https://github.com/jikan-me/website/blob/master/src/lib/components/RequestExamples.svelte"
click node_anime_card "https://github.com/jikan-me/website/blob/master/src/lib/components/AnimeCard.svelte"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_showcase_page toneBlue
class node_features_data,node_integrations_data,node_showcase_data,node_supporters_data toneAmber
class node_nav,node_footer,node_button,node_chip,node_divider,node_integration_card,node_showcase_card,node_marquee,node_heartbeat,node_jikan_api toneMint
class node_request_demo,node_anime_card toneRose
class node_visitor toneIndigo
```

## Components

### Website pages

- [Landing page](https://github.com/jikan-me/website/blob/master/src/routes/%2Bpage.svelte): `src/routes/+page.svelte`
- [Showcase page](https://github.com/jikan-me/website/blob/master/src/routes/showcase/%2Bpage.svelte): `src/routes/showcase/+page.svelte`

### Site content

- [Feature content](https://github.com/jikan-me/website/blob/master/src/data/features.js): `src/data/features.js`
- [Wrapper directory](https://github.com/jikan-me/website/blob/master/src/data/integrations.js): `src/data/integrations.js`
- [Showcase entries](https://github.com/jikan-me/website/blob/master/src/data/showcase.js): `src/data/showcase.js`
- [Supporter data](https://github.com/jikan-me/website/blob/master/src/data/supporters.js): `src/data/supporters.js`

### UI components

- [Navigation](https://github.com/jikan-me/website/blob/master/src/lib/components/Nav.svelte): `src/lib/components/Nav.svelte`
- [Footer](https://github.com/jikan-me/website/blob/master/src/lib/components/Footer.svelte): `src/lib/components/Footer.svelte`
- [Button](https://github.com/jikan-me/website/blob/master/src/lib/components/Button.svelte): `src/lib/components/Button.svelte`
- [Chip](https://github.com/jikan-me/website/blob/master/src/lib/components/Chip.svelte): `src/lib/components/Chip.svelte`
- [Divider](https://github.com/jikan-me/website/blob/master/src/lib/components/Divider.svelte): `src/lib/components/Divider.svelte`
- [Integration card](https://github.com/jikan-me/website/blob/master/src/lib/components/IntegrationCard.svelte): `src/lib/components/IntegrationCard.svelte`
- [Showcase card](https://github.com/jikan-me/website/blob/master/src/lib/components/ShowcaseCard.svelte): `src/lib/components/ShowcaseCard.svelte`
- [Supporter marquee](https://github.com/jikan-me/website/blob/master/src/lib/components/Marquee.svelte): `src/lib/components/Marquee.svelte`
- [MAL heartbeat](https://github.com/jikan-me/website/blob/master/src/lib/components/MalHeartBeat.svelte): `src/lib/components/MalHeartBeat.svelte`

### API demo

- [Request examples](https://github.com/jikan-me/website/blob/master/src/lib/components/RequestExamples.svelte): `src/lib/components/RequestExamples.svelte`
- [Anime result card](https://github.com/jikan-me/website/blob/master/src/lib/components/AnimeCard.svelte): `src/lib/components/AnimeCard.svelte`

### Other components

- **Site visitor**
- **Jikan REST API**

## Connections

- Site visitor → Landing page: opens (evidence: `README.md`)
- Site visitor → Showcase page: browses (evidence: `src/routes/showcase/+page.svelte`)
- Landing page → Navigation: renders (evidence: `src/routes/+page.svelte`)
- Landing page → Footer: renders (evidence: `src/routes/+page.svelte`)
- Landing page → Feature content: uses content (evidence: `src/routes/+page.svelte`)
- Landing page → Wrapper directory: uses content (evidence: `src/routes/+page.svelte`)
- Landing page → Integration card: renders (evidence: `src/routes/+page.svelte`)
- Landing page → Supporter marquee: renders (evidence: `src/routes/+page.svelte`)
- Landing page → Request examples: renders (evidence: `src/routes/+page.svelte`)
- Showcase page → Navigation: renders (evidence: `src/routes/showcase/+page.svelte`)
- Showcase page → Footer: renders (evidence: `src/routes/showcase/+page.svelte`)
- Showcase page → Showcase entries: loads entries (evidence: `src/routes/showcase/+page.svelte`)
- Showcase page → Showcase card: renders entries (evidence: `src/routes/showcase/+page.svelte`)
- Navigation → Button: uses (evidence: `src/lib/components/Nav.svelte`)
- Navigation → Chip: uses (evidence: `src/lib/components/Nav.svelte`)
- Footer → Button: uses (evidence: `src/lib/components/Footer.svelte`)
- Footer → MAL heartbeat: renders (evidence: `src/lib/components/Footer.svelte`)
- Integration card → Chip: uses (evidence: `src/lib/components/IntegrationCard.svelte`)
- Integration card → Divider: uses (evidence: `src/lib/components/IntegrationCard.svelte`)
- Showcase card → Chip: uses (evidence: `src/lib/components/ShowcaseCard.svelte`)
- Supporter marquee → Supporter data: reads (evidence: `src/lib/components/Marquee.svelte`)
- Request examples → Jikan REST API: fetches examples (evidence: `src/lib/components/RequestExamples.svelte`)
- Request examples → Anime result card: renders results (evidence: `src/lib/components/RequestExamples.svelte`)
- Anime result card → Chip: uses (evidence: `src/lib/components/AnimeCard.svelte`)
- Anime result card → Divider: uses (evidence: `src/lib/components/AnimeCard.svelte`)