Introduction
Nautilus is an open-source system design and architecture visualization tool. It allows you to create complex diagrams using a drag-and-drop interface, powered by AI to generate initial structures from simple text prompts.
Interface Overview
Left Sidebar
The component library. Drag and drop nodes onto the canvas. Use the search bar to filter components by name (e.g., "AWS", "Database").
Right Sidebar
Context-aware panels for editing and configuration.
- Properties: Edit the selected node's label, description, and color.
- AI Assistant: Generate diagrams using LLMs (OpenAI, Gemini, Claude, Groq).
- Settings: Manage your API keys securely (stored in local storage).
Toolbar & Tools
Located at the top of the canvas, the toolbar provides essential tools for managing your diagram.
| Action | Description | Shortcut |
|---|---|---|
| Copy / Paste | Duplicate selected nodes and edges. | Cmd+C / Cmd+V |
| Group / Ungroup | Combine nodes into a container or dissolve a container. | - |
| Alignment | Align nodes Left, Center, or Right. | - |
| Distribution | Distribute nodes evenly horizontally. | - |
| Zoom / Fit | Zoom in/out or fit the entire diagram to the screen. | - |
Templates
Nautilus comes with a library of production-grade architecture templates. Click the Templates button in the header to browse.
Contributing Templates
We welcome community contributions! To add a new template, follow this JSON structure in a new file under src/lib/templates/.
export const MyTemplate = {
id: "unique-id",
name: "Template Name",
description: "Short description",
nodes: [
{
id: "node-1",
type: "nautilusNode",
position: { x: 0, y: 0 },
data: {
label: "Node Label",
icon: "icon_key", // See Icon Reference
color: "blue"
},
}
],
edges: [
{
id: "e1",
source: "node-1",
target: "node-2",
type: "deletableEdge",
markerEnd: { type: MarkerType.Arrow }
}
]
}Icon Reference
Use these keys in the icon field of your node data to render the corresponding icon.
userclient_webclient_mobileweb_serverapi_serverauthfirewallvpndatabase_sqlmysqlpostgresmongodbcassandrasqlitecacherediskafkarabbitmqsqsqueueload_balancerreverse_proxycdndnsinternetvpcawsgcpazurecloudflaredigitaloceanopenstacks3miniocloudinaryimagekituploadcarefirebase_storagesupabase_storagestriperazorpaypaypalpayoneercashfreepaddlebillingclerkauth0firebase_authsupabase_authbetter_authcustom_authdockerk8skubernetescontainertraefikmicroserviceserviceblock_storageobject_storagegrafanaprometheuselasticlogstashkibanaorchestratorcdci