# AI use cases for SVG Diagram (bybit-exchange/svg-diagram) Repo: [bybit-exchange/svg-diagram](https://github.com/bybit-exchange/svg-diagram) | Use cases: 3 | Page: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/ A house style and zero-dependency linter that lets a coding agent hand-place SVG diagrams and check them against fixed layout, font, colour and arrow rules. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Draw a flowchart or architecture diagram as lint-clean SVG: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/ - Lint an existing SVG and read findings as JSON: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/lint-svg-and-read-json-findings/ - Draw a sequence or data-flow diagram with CJK labels: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-cjk-labelled-sequence-diagram/ ## How to draw a flowchart or architecture diagram as lint-clean SVG with SVG Diagram Repo: [bybit-exchange/svg-diagram](https://github.com/bybit-exchange/svg-diagram) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Have your agent hand-place an SVG diagram in the house style and confirm it with svg-lint. **Who it is for:** A developer writing a README or docs page who needs a diagram that matches a consistent style and renders on GitHub. **The problem:** Auto-layout tools choose positions you did not pick, and hand-written SVG drifts in spacing, fonts and arrowheads. **The outcome:** A plain SVG file with every coordinate chosen and annotated, reported by svg-lint as 0 errors and 0 warnings. ### Steps 1. Run `npx skills add bybit-exchange/svg-diagram -g` to install the skill for your agents. 2. Start a new session and ask your agent for a diagram of your system, confirming it announces it is using SVG Diagram. 3. Run `node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg` (this path applies to a Claude Code install). 4. Fix each finding using its repair line, then rerun the linter until the output shows 0 errors, 0 warnings. ### Prompt to paste into your agent ```text Using the svg-diagram skill from bybit-exchange/svg-diagram, draw an architecture diagram of as diagram.svg. Run node tools/svg-lint/bin/svg-lint.mjs diagram.svg and fix every finding until it reports 0 errors and 0 warnings. ``` ### Caveat The linter is a maintainer tool that nothing runs for you, so you must invoke it yourself before handing a diagram over. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-lint-clean-svg-diagram/ ## How to lint an existing SVG and read findings as JSON with SVG Diagram Repo: [bybit-exchange/svg-diagram](https://github.com/bybit-exchange/svg-diagram) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Run svg-lint on a diagram and get each violation with its check id and repair line. **Who it is for:** An engineer or agent reviewing a diagram in a pull request who needs to know exactly what breaks the house style. **The problem:** A diagram that looks fine can still break viewBox margins, font stacks, arrow markers or escaping, and reviewing those by eye is slow. **The outcome:** A list of findings with check ids and repair lines in JSON, plus a clear pass or fail based on 0 errors and 0 warnings. ### Steps 1. Clone the SVG Diagram repository, or install the skill with `npx skills add bybit-exchange/svg-diagram -g`. 2. Run `node tools/svg-lint/bin/svg-lint.mjs diagram.svg` to see findings in plain text. 3. Run `node tools/svg-lint/bin/svg-lint.mjs diagram.svg --json` to get the same findings as JSON. 4. Work through each finding by its check id and repair line, then lint again. ### Prompt to paste into your agent ```text In the svg-diagram repo, run node tools/svg-lint/bin/svg-lint.mjs --json and list each finding's check id and repair line. Confirm the file reports 0 errors and 0 warnings before calling it clean. ``` ### Caveat The linter reports only what the house style forbids, so a clean run does not prove a diagram is accurate or easy to read. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/lint-svg-and-read-json-findings/ ## How to draw a sequence or data-flow diagram with CJK labels with SVG Diagram Repo: [bybit-exchange/svg-diagram](https://github.com/bybit-exchange/svg-diagram) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README Get an agent to size Chinese, Japanese or Korean labels correctly so text stays inside its boxes. **Who it is for:** A technical writer producing a document with CJK labels who needs a sequence or data-flow diagram that does not overflow. **The problem:** CJK characters are wider than Latin ones, so labels sized by eye overflow boxes or fall back to missing glyphs on Linux. **The outcome:** An SVG sequence or data-flow diagram whose CJK labels are sized from the CJK width column and pass the lint checks. ### Steps 1. Run `npx skills add bybit-exchange/svg-diagram -g` to install the skill. 2. Ask your agent for a sequence or data-flow diagram of with labels in the target language. 3. Run `node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg` and check the text overflow and font-stack findings. 4. Open the rendered file on the platform your readers use and confirm the CJK text is legible. ### Prompt to paste into your agent ```text Using the svg-diagram skill from bybit-exchange/svg-diagram, draw a sequence diagram of with CJK labels in diagram.svg, sizing each label from the CJK width table. Run the linter and confirm 0 errors and 0 warnings, with no text overflow findings. ``` ### Caveat The font stack keeps Noto Sans CJK SC for Linux rendering, so check the final file on the platform your readers actually use. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/bybit-exchange-svg-diagram/draw-cjk-labelled-sequence-diagram/