openapi: 3.1.0 info: title: CreatorNode Visual API — Render Diagram description: | Render Mermaid diagrams to SVG, PNG, ASCII, and Unicode formats. 5 diagram types, 15 themes, custom colors, transparent backgrounds. Server-side rendering — no browser or Puppeteer required. version: 1.0.0 contact: name: CreatorNode Support url: https://creatornode.io/support license: name: Proprietary url: https://creatornode.io/legal servers: - url: https://api.creatornode.io/visual description: Production tags: - name: Diagrams description: Diagram rendering endpoints paths: /v1/render-diagram: post: operationId: renderDiagram tags: - Diagrams summary: Render Mermaid diagram description: Render a Mermaid diagram to SVG, PNG, ASCII, or Unicode. Supports flowchart, sequence, class, state, and ER diagrams. Defaults to `responseFormat=json`; use `responseFormat=file` for raw SVG or PNG. `responseFormat=file` is not supported with `ascii` or `unicode`. security: - ApiKey: [] - {} requestBody: required: true content: application/json: schema: $ref: "#/components/schemas/RenderDiagramRequest" examples: minimal: summary: Minimal request value: responseFormat: json definition: |- graph LR A --> B withTheme: summary: With theme value: definition: |- flowchart TD Start --> End theme: dark format: svg fullOptions: summary: Full options value: responseFormat: file definition: |- sequenceDiagram Alice->>Bob: Hello format: png theme: dracula options: colors: background: "#1e1e1e" font: Fira Code, monospace png: width: 800 quality: 90 responses: "200": description: Successful render (`json` by default, or raw SVG/PNG when `responseFormat=file`) headers: X-Processing-Time-Ms: description: Processing time in milliseconds schema: type: integer X-Cache-Hit: description: Whether result was from cache schema: type: boolean X-Credits-Used: description: Credits consumed by this request (present only for paid tiers) schema: type: integer example: 2 X-Credits-Remaining: description: Remaining credits on the API key (present only for paid tiers with prepaid credits) schema: type: integer X-Content-Type-Options: description: Security header schema: type: string enum: - nosniff content: application/json: schema: $ref: "#/components/schemas/RenderDiagramResponse" example: success: true data: ... meta: requestId: req_abc123 format: svg contentType: image/svg+xml diagramType: flowchart themeName: zinc-light nodeCount: 5 edgeCount: 4 processingTimeMs: 145 cached: false image/svg+xml: schema: type: string format: binary image/png: schema: type: string format: binary "400": description: Invalid request or diagram syntax content: application/json: schema: $ref: "#/components/schemas/ErrorResponse" examples: syntaxError: summary: Syntax error value: success: false error: code: INVALID_DIAGRAM_SYNTAX message: Parse error on line 2 details: line: 2 column: 5 parserError: Expecting SEMI, got NEWLINE meta: requestId: abc123 validationError: summary: Validation error value: success: false error: code: VALIDATION_ERROR message: Diagram definition is required meta: requestId: abc123 tooLarge: summary: Diagram too large value: success: false error: code: DIAGRAM_TOO_LARGE message: Diagram definition exceeds size limit meta: requestId: abc123 "401": description: Unauthorized content: application/json: schema: $ref: "#/components/schemas/ErrorResponse" "429": description: Rate limited headers: Retry-After: description: Seconds until rate limit resets schema: type: integer content: application/json: schema: $ref: "#/components/schemas/ErrorResponse" example: success: false error: code: RATE_LIMITED message: Rate limit exceeded meta: requestId: abc123 "503": description: Service temporarily saturated headers: Retry-After: description: Seconds before retrying the request schema: type: integer content: application/json: schema: $ref: "#/components/schemas/ErrorResponse" example: success: false error: code: SERVICE_BUSY message: Visual rendering service is temporarily saturated. Retry shortly. meta: requestId: abc123 components: securitySchemes: ApiKey: type: apiKey in: header name: X-API-Key description: APIM subscription key for authentication. Free tier available without key. schemas: RenderDiagramRequest: type: object required: - definition properties: responseFormat: type: string enum: - json - file default: json description: > Success response transport. - `json` (default): JSON wrapper with endpoint metadata and optional recommendations. - `file`: raw SVG or PNG body with selected metadata in headers. definition: type: string minLength: 1 maxLength: 100000 description: Mermaid diagram definition example: |- graph LR A[Start] --> B[End] format: type: string enum: - svg - png - ascii - unicode default: svg description: Output format theme: type: string default: light description: > Theme name or alias. **Aliases:** light, dark, neutral **Full names:** zinc-light, github-light, slate-light, tokyo-night, github-dark, zinc-dark, slate-dark, dracula, monokai, nord, rose-pine, catppuccin-latte, catppuccin-mocha, solarized-light, solarized-dark options: type: object properties: colors: $ref: "#/components/schemas/ThemeColors" font: type: string maxLength: 200 description: "Font family for diagram text. Recommended: Inter (default, bundled), system-ui, or monospace. Custom web fonts may fall back to system fonts in PNG output." default: Inter, system-ui, sans-serif transparent: type: boolean default: false description: Transparent background (SVG only) direction: type: string enum: - LR - TD - BT - RL description: Override flowchart direction ascii: $ref: "#/components/schemas/AsciiOptions" png: $ref: "#/components/schemas/PngOptions" ThemeColors: type: object description: Custom color overrides (hex format properties: background: type: string pattern: ^#[0-9A-Fa-f]{6}$ primaryColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ secondaryColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ tertiaryColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ primaryTextColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ secondaryTextColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ lineColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ primaryBorderColor: type: string pattern: ^#[0-9A-Fa-f]{6}$ AsciiOptions: type: object description: ASCII/Unicode output options properties: paddingX: type: integer minimum: 0 maximum: 10 default: 1 paddingY: type: integer minimum: 0 maximum: 10 default: 0 boxBorderPadding: type: integer minimum: 0 maximum: 5 default: 1 PngOptions: type: object description: PNG output options properties: width: type: integer minimum: 100 maximum: 4096 description: Target width (clamped to tier limit) height: type: integer minimum: 100 maximum: 4096 description: Target height (clamped to tier limit) quality: type: integer minimum: 1 maximum: 100 default: 90 description: PNG quality (1-100) RenderDiagramResponse: type: object required: - success - data - meta properties: success: type: boolean enum: - true data: type: string description: | Rendered output: - SVG: Raw SVG string - PNG: Base64 encoded image - ASCII/Unicode: Text output meta: $ref: "#/components/schemas/ResponseMeta" recommendations: type: array items: $ref: "#/components/schemas/Recommendation" description: Contextual recommendations (max 2) ResponseMeta: type: object required: - requestId - format - contentType - diagramType - themeName - processingTimeMs properties: requestId: type: string description: Unique request identifier format: type: string enum: - svg - png - ascii - unicode description: Artifact format selected by the request. contentType: type: string description: MIME type for the produced artifact. filename: type: string description: Suggested filename for file-mode consumers. diagramType: type: string enum: - flowchart - stateDiagram - sequenceDiagram - classDiagram - erDiagram themeName: type: string description: Resolved theme name nodeCount: type: integer description: Number of nodes in diagram edgeCount: type: integer description: Number of edges in diagram processingTimeMs: type: integer description: Processing time in milliseconds cached: type: boolean description: Whether result was from cache sizeBytes: type: integer description: Size in bytes (PNG only) warning: type: string description: | Warning message when applicable: - Partial ASCII/Unicode support for some diagram types - Custom font used with PNG (may fall back to system font) Recommendation: type: object required: - type - title - message - priority properties: type: type: string enum: - upgrade - tip - warning title: type: string message: type: string priority: type: string enum: - high - medium - low url: type: string format: uri ErrorResponse: type: object required: - success - error properties: success: type: boolean const: false error: type: object required: - code - message properties: code: type: string description: Machine-readable error code. See each endpoint for possible values. message: type: string details: type: object description: Additional context about the error (varies by endpoint). additionalProperties: true meta: type: object required: - requestId properties: requestId: type: string demoMode: type: boolean description: Whether this is a demo endpoint response recommendations: type: array items: $ref: "#/components/schemas/Recommendation" RenderDiagramDemoRequest: type: object required: - definition properties: definition: type: string minLength: 1 description: | Mermaid diagram definition. The demo endpoint detects the diagram type from this string but returns a pre-built sample — it does not render the exact definition you provide. example: |- graph LR A[Start] --> B[End] format: type: string enum: - svg - png - ascii - unicode default: svg description: Output format (determines which pre-built sample is returned) theme: type: string default: light description: Theme name or alias (same values as the real endpoint) RenderDiagramDemoResponse: allOf: - $ref: "#/components/schemas/RenderDiagramResponse" - type: object required: - demoMode - warning properties: demoMode: type: boolean enum: - true description: Always `true` — indicates this is demo data warning: type: string description: Human-readable notice that this is pre-built demo output