Intro

This page contains information pertaining the configuration of the graph itself, if you are looking for ways to configure the sitemap, see the sitemap configuration.

The graph config can be set in three different ways, each overriding the previous one:

Via Plugin Settings

astro.config.mjs

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightSiteGraph from 'starlight-site-graph'
export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightSiteGraph({
        graphConfig: {
          // Global graph configuration
        }
      })],
    }),
  ],
})

Via Frontmatter

Note

This only applies to the <PageGraph/> component.

src/content/docs/my-page.md

---
title: My Page
 graph:
   visible: true
   config: ...
---

My page content goes here!

Via Component Props

src/content/docs/my-page.mdx

---
title: My Page
---

 import { Graph, PageGraph } from 'starlight-site-graph/components';

 This page contains two different graphs:
 <Graph sitemap={{...}} config={{...}} slug="my-page/" />
 <PageGraph config={{...}}/>

Sections

General

General Setting Configure general settings for the graph.

Graph Simulation Configure the simulation parameters for the graph.

Interaction

User Interactions Configure the interaction capabilities of the graph.

Quick Actions Configure the quick actions that can be performed on the graph.

Zoom Configure zooming options for the graph.

Hover Configure hovering options for the graph.

Rendering

Nodes Configure how nodes are rendered.

Node Style Style individual nodes.

Tags Configure how tags are handled.

Links Configure how links are rendered.

Labels Configure how labels are rendered.