Skip to content

Diagram nodes cannot carry brand logos, but the product promises they can #288

Description

@anandpant

Problem

Sketchi's central marketing claim is not supported by the renderer.

sketchi.app says: "Turn a sentence into a clean, editable diagram, with the real logos of your stack." The feature grid says "1,400+ logos, already drawn." The hero illustration shows flowchart nodes containing GitHub, Docker, and Cloudflare marks.

The renderer cannot do this.

Evidence

  • packages/diagram/core/src/diagram-types/flowchart.ts — the node schema carries only label and kind (start / process / decision / end). There is no icon, image, or brand field.
  • packages/diagram/excalidraw/src/lib/*.ts — the Excalidraw conversion emits no image element type and no fileId.

So the icon library (1,412 SVGs, now with a full public API and MCP server) and the diagram renderer are two halves of the product that are not connected to each other. The hero illustration on the marketing site is a CSS mock; no generated diagram can look like it.

This surfaced while building the playground's empty-state sample: the implementer had to put the GitHub/Docker/Cloudflare marks in a caption row beside the diagram because they could not be placed inside the nodes.

Scope

This is a feature, not polish. Roughly:

  1. Node schema gains an optional brand/icon reference.
  2. Layout reserves space for the mark inside the node box.
  3. Excalidraw conversion emits real image elements with file embedding, so exported .excalidraw files and PNGs carry the logo.
  4. Icon resolution maps prompt text to an icon slug via the icons library, ideally reusing the ranked search that already backs icons.sketchi.app/api/icons.
  5. The generation contract and model guidance need to expose it without letting the model invent slugs.

Acceptance

  • A generated flowchart from a prompt naming real technologies renders with those brand marks inside the nodes.
  • The exported Excalidraw file and PNG both retain the marks.
  • The marketing hero can be replaced with a genuine render rather than a CSS mock.

Notes

Until this lands, consider whether the homepage copy should be softened — right now it promises something the product does not do.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions