Title: change: Generate mermaid diagrams at build time? · Issue #254 · mkdocstrings/python · GitHub
Open Graph Title: change: Generate mermaid diagrams at build time? · Issue #254 · mkdocstrings/python
X Title: change: Generate mermaid diagrams at build time? · Issue #254 · mkdocstrings/python
Description: Is your change request related to a problem? Please describe. Currently, inheritance diagrams are generated as Mermaid divs, which are then rendered on the client-side. They need a bit of javascript in order to set the URLs on the clicka...
Open Graph Description: Is your change request related to a problem? Please describe. Currently, inheritance diagrams are generated as Mermaid divs, which are then rendered on the client-side. They need a bit of javascrip...
X Description: Is your change request related to a problem? Please describe. Currently, inheritance diagrams are generated as Mermaid divs, which are then rendered on the client-side. They need a bit of javascrip...
Opengraph URL: https://github.com/mkdocstrings/python/issues/254
X: @github
Domain: patch-diff.githubusercontent.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"change: Generate mermaid diagrams at build time?","articleBody":"### Is your change request related to a problem? Please describe.\nCurrently, inheritance diagrams are generated as Mermaid divs, which are then rendered on the client-side. They need a bit of javascript in order to set the URLs on the clickable nodes. Sometimes these diagrams take a bit of time to render, leaving the ugly div / code block visible to users for one second or less. Also, such dynamic content is not supported by Material for MkDocs' instant previews, so they do not look good at all when hovering on links.\n\n### Describe the solution you'd like\nI wonder if it would be possible to generate the SVGs at build time (with a Jinja filter), keeping `\u003cautoref\u003e` elements where `\u003ca\u003e` links should appear (in the clickable nodes). This way we show all nodes, and resolvable ones will become clickable automatically when autorefs applies cross-refs. This is all done at build time, and won't require any javascript (custom or mermaid.js) on the client-side, meaning diagrams should then be displayed instantly and correctly in instant previews. CSS should work as previously.\n\n### Alternatives\nFinding a way to hide diagrams from instant previews.\n\n### Additional context\nI don't think it's a problem if we move the logic for rendering diagrams into Python code, instead of Jinja templates, since this is not something that we likely want to customize (it's really just Jinja loops to render a Mermaid flowchart). It could still be interesting to document how to override filters, in case users want to customize how the SVG is rendered. The filter can always accept options, too.","author":{"url":"https://github.com/pawamoy","@type":"Person","name":"pawamoy"},"datePublished":"2025-02-24T14:09:33.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/254/python/issues/254"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:439006fb-0db5-5d59-b276-6a302ba4ea8a |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | A724:B1425:8B6F17:B88D27:6971682C |
| html-safe-nonce | ed8c74e8b100062831ed649d3784bedad69a7f28f5c5c5115047627548f11ec4 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBNzI0OkIxNDI1OjhCNkYxNzpCODhEMjc6Njk3MTY4MkMiLCJ2aXNpdG9yX2lkIjoiNTEzMjI2OTgyNzc5OTQ3NjI2OCIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 366224476ef9436ccc311155b8d33cae4d7a7a0fd6cf528b8da2aeadc5133623 |
| hovercard-subject-tag | issue:2875086504 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/mkdocstrings/python/254/issue_layout |
| twitter:image | https://opengraph.githubassets.com/08f167bb6b3c808dc7391cf31b604b3fdf6dbbef15ba88e8408379fae71cb656/mkdocstrings/python/issues/254 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/08f167bb6b3c808dc7391cf31b604b3fdf6dbbef15ba88e8408379fae71cb656/mkdocstrings/python/issues/254 |
| og:image:alt | Is your change request related to a problem? Please describe. Currently, inheritance diagrams are generated as Mermaid divs, which are then rendered on the client-side. They need a bit of javascrip... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | pawamoy |
| hostname | github.com |
| expected-hostname | github.com |
| None | 873364ab8c3892d45b3a7f6c012702ee84934662b47c9312d99f8b31dd9c2668 |
| turbo-cache-control | no-preview |
| go-import | github.com/mkdocstrings/python git https://github.com/mkdocstrings/python.git |
| octolytics-dimension-user_id | 75664361 |
| octolytics-dimension-user_login | mkdocstrings |
| octolytics-dimension-repository_id | 422878404 |
| octolytics-dimension-repository_nwo | mkdocstrings/python |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 422878404 |
| octolytics-dimension-repository_network_root_nwo | mkdocstrings/python |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | fa6ed180534301da051f8e5cb00f3a1dfab789ec |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width