{ "title": "diagram-design skill tested: 24 diagrams with and without it, plus other diagram skills", "page": "https://agentcraft.dev/en/blog/diagram-design-skill-2026-11/", "test": { "setup": { "claudeCode": "2.1.314", "model": "haiku", "reps": 2, "skill": "https://github.com/cathrynlavery/diagram-design/tree/e57eda6/skills/diagram-design", "diagrams": { "architecture": "an architecture diagram of a web shop: Browser, CDN, API Gateway, Auth Service, Orders Service, Postgres, Redis Cache and a Message Queue, with their connections", "flowchart": "a flowchart of sign-up: Start, Enter email, a decision Valid email?, Send code, a decision Code correct?, Create account, Show error, End", "sequence": "a sequence diagram of an OAuth login between User, App, Auth Server and Resource API: redirect, login, authorization code, token exchange, API call with token", "er": "an entity-relationship diagram for Customer, Order, OrderItem and Product with their keys and one-to-many relationships", "state": "a state machine for an order: Pending, Paid, Shipped, Delivered, Cancelled and Refunded, with the events between them", "timeline": "a timeline of a six-month project: Kickoff in January, Design in February, Build from March to April, Beta in May, Launch in June" } }, "groups": { "base": { "n": 12, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 4.199999999999999, "readFilesBeyondSkill": 1, "medianTextElements": 18.0, "medianTurns": 1.0, "medianOutputTokens": 6015.5, "medianSeconds": 27.5, "totalCostUsd": 0.0544 }, "diagram-design": { "n": 12, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 12, "loadsGoogleFonts": 12, "usesSkillDefaultTokens": 12, "medianHtmlKb": 8.65, "readFilesBeyondSkill": 12, "medianTextElements": 24.5, "medianTurns": 3.5, "medianOutputTokens": 14019.0, "medianSeconds": 62.0, "totalCostUsd": 0.1688 } }, "perDiagram": { "architecture": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 4.5, "readFilesBeyondSkill": 0, "medianTextElements": 25.5, "medianTurns": 1.0, "medianOutputTokens": 9633.5, "medianSeconds": 44.5, "totalCostUsd": 0.0124 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 12.399999999999999, "readFilesBeyondSkill": 2, "medianTextElements": 34.0, "medianTurns": 4.0, "medianOutputTokens": 25252.5, "medianSeconds": 111.5, "totalCostUsd": 0.0405 } }, "flowchart": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 2.75, "readFilesBeyondSkill": 0, "medianTextElements": 12.5, "medianTurns": 1.0, "medianOutputTokens": 3379.0, "medianSeconds": 18.0, "totalCostUsd": 0.0061 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 7.15, "readFilesBeyondSkill": 2, "medianTextElements": 14.5, "medianTurns": 3.0, "medianOutputTokens": 10583.5, "medianSeconds": 50.5, "totalCostUsd": 0.0207 } }, "sequence": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 6.1, "readFilesBeyondSkill": 0, "medianTextElements": 24.0, "medianTurns": 1.0, "medianOutputTokens": 7139.0, "medianSeconds": 32.5, "totalCostUsd": 0.0099 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 12.95, "readFilesBeyondSkill": 2, "medianTextElements": 27.0, "medianTurns": 3.5, "medianOutputTokens": 18539.0, "medianSeconds": 80.5, "totalCostUsd": 0.0314 } }, "er": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 6.45, "readFilesBeyondSkill": 0, "medianTextElements": 43.5, "medianTurns": 1.0, "medianOutputTokens": 7673.5, "medianSeconds": 35.0, "totalCostUsd": 0.0104 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 9.100000000000001, "readFilesBeyondSkill": 2, "medianTextElements": 55.5, "medianTurns": 3.5, "medianOutputTokens": 14527.0, "medianSeconds": 69.5, "totalCostUsd": 0.0273 } }, "state": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 4.199999999999999, "readFilesBeyondSkill": 0, "medianTextElements": 13.5, "medianTurns": 1.0, "medianOutputTokens": 5517.0, "medianSeconds": 24.5, "totalCostUsd": 0.0083 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 8.05, "readFilesBeyondSkill": 2, "medianTextElements": 22.5, "medianTurns": 3.5, "medianOutputTokens": 15298.0, "medianSeconds": 70.0, "totalCostUsd": 0.0273 } }, "timeline": { "base": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 0, "loadsGoogleFonts": 0, "usesSkillDefaultTokens": 0, "medianHtmlKb": 2.9, "readFilesBeyondSkill": 1, "medianTextElements": 11.0, "medianTurns": 2.0, "medianOutputTokens": 3406.0, "medianSeconds": 18.5, "totalCostUsd": 0.0073 }, "diagram-design": { "n": 2, "pctRendered": 100, "pctAllLabels": 100, "pctNoOverlapNoOverflow": 100, "totalOverlaps": 0, "totalOutside": 0, "loadsExternal": 2, "loadsGoogleFonts": 2, "usesSkillDefaultTokens": 2, "medianHtmlKb": 6.949999999999999, "readFilesBeyondSkill": 2, "medianTextElements": 12.5, "medianTurns": 3.5, "medianOutputTokens": 9748.0, "medianSeconds": 47.0, "totalCostUsd": 0.0216 } } }, "rows": [ { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 4.1, "arm": "base", "diagram": "architecture", "rep": 0, "rendered": true, "texts": 25, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1444, 627 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 11518, "costUsd": 0.0071373899999999995, "seconds": 54 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 4.9, "arm": "base", "diagram": "architecture", "rep": 1, "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1000, 480 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 7749, "costUsd": 0.00525369, "seconds": 35 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 12.6, "arm": "diagram-design", "diagram": "architecture", "rep": 0, "rendered": true, "texts": 33, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 640 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 24274, "costUsd": 0.019748969999999998, "seconds": 106 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 12.2, "arm": "diagram-design", "diagram": "architecture", "rep": 1, "rendered": true, "texts": 35, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 540 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 26231, "costUsd": 0.02071507, "seconds": 117 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 7.2, "arm": "base", "diagram": "er", "rep": 0, "rendered": true, "texts": 49, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 912, 502 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 8020, "costUsd": 0.005383389999999999, "seconds": 35 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 5.7, "arm": "base", "diagram": "er", "rep": 1, "rendered": true, "texts": 38, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 900, 540 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 7327, "costUsd": 0.00503729, "seconds": 35 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 8.9, "arm": "diagram-design", "diagram": "er", "rep": 0, "rendered": true, "texts": 54, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 1200, 750 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 11988, "costUsd": 0.01109254, "seconds": 57 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 9.3, "arm": "diagram-design", "diagram": "er", "rep": 1, "rendered": true, "texts": 57, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 1200, 725 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 17066, "costUsd": 0.01622953, "seconds": 82 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 2.9, "arm": "base", "diagram": "flowchart", "rep": 0, "rendered": true, "texts": 12, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 420, 620 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 3506, "costUsd": 0.00312979, "seconds": 19 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 2.6, "arm": "base", "diagram": "flowchart", "rep": 1, "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 480, 600 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 3252, "costUsd": 0.0030023899999999997, "seconds": 17 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 6.6, "arm": "diagram-design", "diagram": "flowchart", "rep": 0, "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 875 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 8610, "costUsd": 0.00935573, "seconds": 43 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 7.7, "arm": "diagram-design", "diagram": "flowchart", "rep": 1, "rendered": true, "texts": 16, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 875 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 12557, "costUsd": 0.011315490000000001, "seconds": 58 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 6.6, "arm": "base", "diagram": "sequence", "rep": 0, "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1000, 720 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 6030, "costUsd": 0.00439099, "seconds": 28 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 5.6, "arm": "base", "diagram": "sequence", "rep": 1, "rendered": true, "texts": 22, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 960, 730 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 8248, "costUsd": 0.005500789999999999, "seconds": 37 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 12.6, "arm": "diagram-design", "diagram": "sequence", "rep": 0, "rendered": true, "texts": 28, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 975 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 15481, "costUsd": 0.01329706, "seconds": 66 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 13.3, "arm": "diagram-design", "diagram": "sequence", "rep": 1, "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 840 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 21597, "costUsd": 0.01815129, "seconds": 95 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 4.1, "arm": "base", "diagram": "state", "rep": 0, "rendered": true, "texts": 14, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 840, 470 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 6001, "costUsd": 0.00437489, "seconds": 27 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 4.3, "arm": "base", "diagram": "state", "rep": 1, "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1428, 715 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 5033, "costUsd": 0.00389089, "seconds": 22 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 8.4, "arm": "diagram-design", "diagram": "state", "rep": 0, "rendered": true, "texts": 23, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1200, 725 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 19358, "costUsd": 0.0166074, "seconds": 89 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 7.7, "arm": "diagram-design", "diagram": "state", "rep": 1, "rendered": true, "texts": 22, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1200, 675 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 11238, "costUsd": 0.01071974, "seconds": 51 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 2.8, "arm": "base", "diagram": "timeline", "rep": 0, "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 900, 220 ], "labelsOk": true, "clean": true, "turns": 1, "outputTokens": 2629, "costUsd": 0.00268929, "seconds": 14 }, { "externalUrls": [], "loadsGoogleFonts": false, "usesSkillDefaultTokens": false, "htmlKb": 3.0, "arm": "base", "diagram": "timeline", "rep": 1, "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 900, 200 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 4183, "costUsd": 0.00456866, "seconds": 23 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 6.6, "arm": "diagram-design", "diagram": "timeline", "rep": 0, "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 300 ], "labelsOk": true, "clean": true, "turns": 4, "outputTokens": 8967, "costUsd": 0.011305099999999998, "seconds": 43 }, { "externalUrls": [ "https://fonts.googleapis.com/css2?family=instrument+serif:ital@0;1&family=geist:wght@400;500;600&family=geist+mono:wght@400;500;600&family=noto+serif:ital@0;1&family=noto+sans+kr:wght@400;500;600&family=noto+serif+kr:wght@400&family=noto+sans+tc:wght@400;500;600&family=noto+serif+tc:wght@400&display=swap" ], "loadsGoogleFonts": true, "usesSkillDefaultTokens": true, "htmlKb": 7.3, "arm": "diagram-design", "diagram": "timeline", "rep": 1, "rendered": true, "texts": 14, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 725 ], "labelsOk": true, "clean": true, "turns": 3, "outputTokens": 10529, "costUsd": 0.010293130000000001, "seconds": 51 } ] }, "browserMeasurements": { "base__architecture__0": { "rendered": true, "texts": 25, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1444, 627 ] }, "base__architecture__1": { "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1000, 480 ] }, "base__er__0": { "rendered": true, "texts": 49, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 912, 502 ] }, "base__er__1": { "rendered": true, "texts": 38, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 900, 540 ] }, "base__flowchart__0": { "rendered": true, "texts": 12, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 420, 620 ] }, "base__flowchart__1": { "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 480, 600 ] }, "base__sequence__0": { "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1000, 720 ] }, "base__sequence__1": { "rendered": true, "texts": 22, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 960, 730 ] }, "base__state__0": { "rendered": true, "texts": 14, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 840, 470 ] }, "base__state__1": { "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1428, 715 ] }, "base__timeline__0": { "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 900, 220 ] }, "base__timeline__1": { "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 900, 200 ] }, "diagram-design__architecture__0": { "rendered": true, "texts": 33, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 640 ] }, "diagram-design__architecture__1": { "rendered": true, "texts": 35, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 540 ] }, "diagram-design__er__0": { "rendered": true, "texts": 54, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 1200, 750 ] }, "diagram-design__er__1": { "rendered": true, "texts": 57, "overlaps": 0, "outside": 0, "labelsFound": 4, "svgSize": [ 1200, 725 ] }, "diagram-design__flowchart__0": { "rendered": true, "texts": 13, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 875 ] }, "diagram-design__flowchart__1": { "rendered": true, "texts": 16, "overlaps": 0, "outside": 0, "labelsFound": 8, "svgSize": [ 1200, 875 ] }, "diagram-design__sequence__0": { "rendered": true, "texts": 28, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 975 ] }, "diagram-design__sequence__1": { "rendered": true, "texts": 26, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 840 ] }, "diagram-design__state__0": { "rendered": true, "texts": 23, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1200, 725 ] }, "diagram-design__state__1": { "rendered": true, "texts": 22, "overlaps": 0, "outside": 0, "labelsFound": 6, "svgSize": [ 1200, 675 ] }, "diagram-design__timeline__0": { "rendered": true, "texts": 11, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 300 ] }, "diagram-design__timeline__1": { "rendered": true, "texts": 14, "overlaps": 0, "outside": 0, "labelsFound": 5, "svgSize": [ 1200, 725 ] } }, "calibration": { "badDiagram": { "bad__state__0": { "rendered": true, "texts": 5, "overlaps": 1, "outside": 1, "labelsFound": 5, "svgSize": [ 400, 200 ] } }, "note": "a hand-made SVG with one overlapping pair, one label past the right edge and one of six required labels missing" }, "otherDiagramSkills": [ { "repo": "tt-a1i/archify", "skill": "archify", "output": "HTML", "does": "Makes checked standalone HTML diagrams of architecture, flows, schemas and timelines, grounded in repo code.", "repoStarsNov6": 94277, "repoGained8d": 2733, "url": "https://github.com/tt-a1i/archify/blob/main/archify/SKILL.md" }, { "repo": "garrytan/gstack", "skill": "diagram", "output": "Excalidraw, SVG, PNG", "does": "Turns a description or Mermaid source into an Excalidraw file plus SVG and PNG renders.", "repoStarsNov6": 140531, "repoGained8d": 2317, "url": "https://github.com/garrytan/gstack/blob/main/diagram/SKILL.md" }, { "repo": "calesthio/OpenMontage", "skill": "beautiful-mermaid", "output": "Mermaid to SVG, PNG", "does": "Renders Mermaid diagrams to SVG and PNG with the Beautiful Mermaid library and selectable themes.", "repoStarsNov6": 77866, "repoGained8d": 4788, "url": "https://github.com/calesthio/OpenMontage/blob/main/.agents/skills/beautiful-mermaid/SKILL.md" }, { "repo": "JimLiu/baoyu-skills", "skill": "baoyu-diagram", "output": "SVG", "does": "Creates standalone dark-themed SVG diagrams such as architecture, flowchart, sequence and mind map.", "repoStarsNov6": 27364, "repoGained8d": 294, "url": "https://github.com/JimLiu/baoyu-skills/blob/main/skills/baoyu-diagram/SKILL.md" }, { "repo": "Agents365-ai/drawio-skill", "skill": "drawio-skill", "output": "draw.io", "does": "Creates and edits editable draw.io diagrams from descriptions or code, with sync, review, and export.", "repoStarsNov6": 10626, "repoGained8d": 166, "url": "https://github.com/Agents365-ai/drawio-skill/blob/main/skills/drawio-skill/SKILL.md" }, { "repo": "coleam00/excalidraw-diagram-skill", "skill": "excalidraw-diagram", "output": "Excalidraw", "does": "Makes the agent produce Excalidraw JSON diagrams that show workflows, architectures and concepts visually.", "repoStarsNov6": 5206, "repoGained8d": 72, "url": "https://github.com/coleam00/excalidraw-diagram-skill/blob/main/SKILL.md" }, { "repo": "plannotator/effective-html", "skill": "html-diagram", "output": "HTML", "does": "Builds a self-contained HTML diagram whose notation and layout match the relationship being shown.", "repoStarsNov6": 4040, "repoGained8d": 243, "url": "https://github.com/plannotator/effective-html/blob/main/skills/html-diagram/SKILL.md" }, { "repo": "axtonliu/axton-obsidian-visual-skills", "skill": "mermaid-visualizer", "output": "Mermaid", "does": "Converts text into Mermaid flowcharts, architecture diagrams and mind maps, avoiding common syntax errors.", "repoStarsNov6": 3678, "repoGained8d": 9, "url": "https://github.com/axtonliu/axton-obsidian-visual-skills/blob/main/mermaid-visualizer/SKILL.md" }, { "repo": "softaworks/agent-toolkit", "skill": "c4-architecture", "output": "Mermaid (C4)", "does": "Makes the agent analyze a codebase and draw C4 architecture diagrams in Mermaid syntax.", "repoStarsNov6": 2639, "repoGained8d": 37, "url": "https://github.com/softaworks/agent-toolkit/blob/main/skills/c4-architecture/SKILL.md" }, { "repo": "cathrynlavery/diagram-design", "skill": "diagram-design", "output": "HTML, SVG, PNG", "does": "Creates branded HTML, SVG or PNG diagrams in many chart types, with drawio and Mermaid import.", "repoStarsNov6": 65548, "repoGained8d": 2527, "url": "https://github.com/cathrynlavery/diagram-design/blob/main/skills/diagram-design/SKILL.md" } ] }