A diagramming tool for technical documentation. Fits design-utility SaaS, documentation tools, dev-collab apps, and engineering-doc landing page designs.
Screenshots of 5 pages from eraser.io: homepage, use cases, resources, Eraser Ai and pricing.
Three ways to ship a Eraser-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Eraser. All trademarks belong to their respective owners.
About Eraser
Home page hero
The home page is dark and dense with product. A bold condensed headline reads "Documents & diagrams for engineering teams," with the first line in light blue and the second in white. Below it, a line describes an all-in-one markdown editor, collaborative canvas and diagram-as-code builder, with a white "Try Eraser" button. Around the headline float small outlined tags such as diagram as code, AI diagrams and documents and diagrams, and colored name cursors for teammates, which hint at live collaboration. A large product window follows, split between a written document about a file sync service and an entity diagram with a code snippet.
Feature chapters
The long home page is organised as vertical chapters joined by a dotted line with round icons. Early chapters cover file management, fast search, wikilinks and a share dialog. A "For Developers" chapter shows a diagram-as-code panel next to a picker for diagram types such as cloud architecture, entity relationship, flow chart and sequence. Smaller cards cover keyboard-first work, color styling and version history. A pink "Workflow" chapter closes with API, integrations, markdown and export.
Use cases page
The use cases page is built around a single topic. Its breadcrumb and a red tag lead into the headline "Architecture Diagrams," a short line, and an open-in-Eraser button. On the right, a large white-background example shows a recommendation system architecture split into offline, nearline and online layers, with colored boxes and arrows. Below it, an examples section begins, so the page proves the use case with a real diagram before listing more.
Examples gallery
The resources capture is an examples gallery titled "Eraser Examples." A left sidebar offers a search field, an example-type filter and a long list of use-case filters such as design docs, architecture diagrams, wireframes and Kubernetes architecture. A three-column card grid fills the rest, each card with a dark diagram thumbnail, a title and a short description, for example Auth0 SSO, CI/CD using Azure Pipelines and a Docker build sequence.
Eraser AI page
The Eraser AI page opens with "Eraser AI, the first copilot for technical design" in a purple and white headline, then a sign-up button and a large video thumbnail with a two-minute demo label. A counter says over a million requests have been processed. A later section, "Generate diagrams on an infinite canvas," shows a prompt panel where a user describes a microservices architecture, picks a diagram type and presses generate.
Based on full-page screenshots of eraser.io: the home page, an architecture diagrams use-case page, the examples gallery and the Eraser AI page. Usage figures are the site's own claims and were not verified here. The pricing page was not reviewed. Check the live site before relying on specific details.
Related designs
