{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "hellosverre-claude-skins--read-diagrams-and-math-as-cards",
 "repo": "hellosverre/claude-skins",
 "repo_url": "https://github.com/hellosverre/claude-skins",
 "repo_slug": "hellosverre-claude-skins",
 "title": "Read Claude's Mermaid charts and math as drawn cards",
 "page_title": "How to read Claude's Mermaid charts and math as drawn cards with Claude Skins",
 "summary": "Turn Mermaid fences and TeX math in replies into charts and typeset cards you can copy.",
 "who": "A student, engineer or researcher who asks Claude to explain a system or a formula and wants readable diagrams and equations.",
 "problem": "Mermaid source and raw TeX in a chat reply are hard to read as a picture, and copying them out is awkward.",
 "outcome": "Mermaid fences draw as charts and math draws as typeset cards, each with a Copy button.",
 "steps": [
  "Make sure skins is installed and that the charts and math parts are on, which the README lists as on by default options in /skin parts.",
  "Ask Claude to explain a process and include a Mermaid diagram, or ask a question that needs a formula.",
  "Check that a ```mermaid fence draws as a chart card with a Copy button.",
  "Check that $$...$$ or \\[...\\] draws as a typeset math card.",
  "Run `/skin charts off` or `/skin math off` if you want Claude Code's own drawing back for either one. (inferred, check the README)"
 ],
 "agent_prompt": "In Claude Code with hellosverre/claude-skins installed, ask Claude to explain <topic> with a Mermaid flowchart and a short formula. Expected output: the flowchart appears as a chart card and the formula as a typeset card. Verify that the Copy button is present on each card.",
 "agents": [
  "claude-code"
 ],
 "difficulty": "Intermediate",
 "time": "30 minutes",
 "basis": "readme",
 "caveat": "The README says the desktop app does not draw sequence, state, class and ER diagrams as charts and shows them as code cards instead.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "Claude Code 2.1.287 or later, in a terminal or the desktop app's Code tab",
  "Permission to run /plugin commands inside Claude Code"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [],
 "best": false,
 "score": 0.8,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/hellosverre-claude-skins/read-diagrams-and-math-as-cards/",
 "md": "https://dedupedai.com/use-cases/hellosverre-claude-skins/read-diagrams-and-math-as-cards/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/hellosverre-claude-skins--read-diagrams-and-math-as-cards.json",
 "api_version": "v1"
}