Skip to content

docs(skills): article diagram examples and Mermaid layout rules - #1870

Open
felixwidjaja wants to merge 1 commit into
mainfrom
docs/diagram-skill-five-article-examples
Open

felixwidjaja wants to merge 1 commit into
mainfrom
docs/diagram-skill-five-article-examples

Conversation

@felixwidjaja

Copy link
Copy Markdown
Member

Summary

Skill-only change. Adds the diagrams from the last rounds of blog work as examples for .claude/skills/datum-diagram and records what we learned.

  • Examples: the Datum Desktop article diagrams (direct vs relay paths, request flow) and the five-article set (four flavors, Galactic VPC land anything and private by default, every agent's edge/tunnels/backbone, Compute and Galactic VPC), each with its Mermaid version.
  • Mermaid layout rules: keep the natural width under about 650px; a subgraph's direction is ignored once an edge crosses its boundary (use a root flowchart LR with per-node links for a stacked column); use a real sequenceDiagram for request flows.
  • Gotchas: after publishing, check the live URL a few times, because the site can serve the build-time cache after a deploy (re-saving the article re-fires the webhook); restart the dev server to pick up Mermaid theme changes.
  • Fix: the "Putting both versions in an article" section had a broken code fence; rewritten.

No site code changes.

Test plan

  • Rendered every example with the skill's own scripts (designed and Mermaid)
  • prettier on the changed files

Add the Datum Desktop and five-article designed diagrams with their Mermaid
versions as examples, document the Mermaid width and subgraph-direction
rules, the cache-after-publish check, and fix a broken code fence.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant