mkdocs-markgraf

MkDocs plugin that renders markgraf animations inside documentation pages.

Fenced ```markgraf blocks become an interactive Canvas2D player with a scrub bar, keyframe ticks, play/pause, and speed control. The bundled JS/CSS ships with the plugin — no CDN, no external dependencies at runtime.

Install

pip install mkdocs-markgraf

Use

mkdocs.yml:

plugins:
  - markgraf

Inside a page:

```markgraf
seed 1

scene v1 {
  + client: Client
  + api: API
  + db: Database
  + client -> api
  + api -> db
  client ~> api: GET /user/42
  api ~> db: SELECT
}

scene v2 {
  + cache: Cache
  - api -> db
  + api -> cache
  client ~> api: GET /user/42
  api ~> cache: HIT
}
```

Sizing

Constrain the embed via fence attributes:

```markgraf height=320
…
```

```markgraf width=420
…
```

```markgraf height=80svh
…
```

Values default to px; svh, vh, dvh, %, em, rem are accepted as explicit units. height clamps max-height on the canvas; width clamps max-width on the embed container.

Player controls

Click the canvas or press Space anywhere to toggle play/pause.
Click ticks on the scrub bar to jump between keyframes.
Only one embed plays at a time — starting one pauses the others.
The control bar is overlaid on the canvas and only shown on hover or focus.

Configuration

mkdocs.yml:

plugins:
  - markgraf:
      assets_subdir: assets/markgraf  # where to copy the bundled JS/CSS
      js_path: /path/to/markgraf-embed.js   # override the bundled JS
      css_path: /path/to/markgraf-embed.css # override the bundled CSS

License

MIT.

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

mkdocs_markgraf-0.0.30.tar.gz (164.1 kB view details)

Uploaded Sep 3, 2026 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

mkdocs_markgraf-0.0.30-py3-none-any.whl (164.4 kB view details)

Uploaded Sep 3, 2026 Python 3

File details

Details for the file mkdocs_markgraf-0.0.30.tar.gz.

File metadata

Download URL: mkdocs_markgraf-0.0.30.tar.gz
Upload date: Sep 3, 2026
Size: 164.1 kB
Tags: Source
Uploaded using Trusted Publishing? Yes
Uploaded via: twine/7.0.0 CPython/3.13.14

File hashes

Hashes for mkdocs_markgraf-0.0.30.tar.gz
Algorithm	Hash digest
SHA256	`148261eec1d163c7c77306c3fcbfd50fec78d0c8b1200c8544c1c6131c72afba`
MD5	`d1c14084b79d7348caaa3e9fc070e72b`
BLAKE2b-256	`2aa9ad31e64b3454cc3175047bd9bc6438de75a623597c280017e787d7b52d5b`

See more details on using hashes here.

Provenance

The following attestation bundles were made for mkdocs_markgraf-0.0.30.tar.gz:

Publisher: publish.yml on markgrafhq/mkdocs-markgraf

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Statement:
- Statement type: https://in-toto.io/Statement/v1
- Predicate type: https://docs.pypi.org/attestations/publish/v1
- Subject name: mkdocs_markgraf-0.0.30.tar.gz
- Subject digest: 148261eec1d163c7c77306c3fcbfd50fec78d0c8b1200c8544c1c6131c72afba
- Sigstore transparency entry: 2697057201
- Sigstore integration time: Sep 3, 2026
Source repository:
- Permalink: markgrafhq/mkdocs-markgraf@dd0308bc980e549771f802f6e22a59a5d83f9835
- Branch / Tag: refs/tags/v0.0.30
- Owner: https://github.com/markgrafhq
- Access: public
Publication detail:
- Token Issuer: https://token.actions.githubusercontent.com
- Runner Environment: github-hosted
- Publication workflow: publish.yml@dd0308bc980e549771f802f6e22a59a5d83f9835
- Trigger Event: push