Dokumentation
Så använder du Anfracto
Anfracto hjälper dig att se arkitekturen i ditt projekt som en interaktiv nodkarta, redigera kod med insikter och förhandsgranska resultatet — allt i samma dashboard.
Översikt
I Anfracto arbetar du i två huvudlägen:
- Start — beskriv en app, välj mall, importera från GitHub eller Repomix, eller starta tomt.
- Projekt — nodkarta, kod, förhandsgranskning och filer när en karta finns.
Byt mellan Start och Projekt via den smala sidomenyn till vänster (ikonerna Start och Projekt).
Kom igång
Logga in
Gå till Dashboard och logga in med ditt konto (Supabase). Utan inloggning kan du fortfarande utforska flödet beroende på hur er miljö är satt upp.
Välj hur du vill börja
På startsidan i dashboarden fyller du i en beskrivning, väljer en mall, klistrar in en GitHub-URL, importerar med Repomix eller startar ett tomt projekt.
Utforska nodkartan
När projektet genererats öppnas Arkitektur-vyn med noder och beroenden. Klicka på noder för att välja fil och se kod samt insikter i andra vyer.
Skapa ett projekt
Du kan starta på flera sätt:
- Fritext (prompt) — beskriv appen du vill bygga och välj Generate map. Anfracto skapar noder och kanter utifrån beskrivningen.
- Mallar — t.ex. E-commerce, SaaS, Portfolio, Blog. Välj en mall och generera kartan.
- GitHub — klistra in en repo-URL och importera filer för att bygga en karta från befintlig kod.
- Tomt projekt — börja utan noder och lägg till egna noder manuellt.
repomix-output.xml för att härleda noder från hela repot.Dashboard-vyer
När du är i Projekt växlar du vy via raden över arbetsytan (mitt i topbaren):
| Vy | Beskrivning |
|---|---|
| Arkitektur | Interaktiv nodkarta (React Flow). Fokusera en nod: övriga tonas ned; du kan gå djupare i hierarkin och använda Hela kartan / Esc för att backa. |
| Kod + Insikt | Kodredigerare (Monaco) bredvid en mindre karta och insiktpanel för vald nod. Dra i separatorn för att ändra bredd. |
| Kod + Preview | Kod och Sandpack-livepreview sida vid sida. Nodlista kan döljas med pilknappen. Terminalrutor för npm-kommandon (WebContainer) under preview när det finns. |
| Preview | Kod + förhandsgranskning; vid repo-import kan en iframe-preview (dev-server) användas när den är tillgänglig. |
| Filer | Översikt av projektfiler kopplade till noder. |
Din senast valda vy sparas lokalt i webbläsaren och återställs nästa gång du öppnar dashboarden.
Nodkartan
Varje nod motsvarar en del av arkitekturen (komponent, vy, hook, API, databas osv.) med etikett, typ och kopplad kod.
- Klick på kartan väljer noden och zoomar in så att du ser delnoder (barn i grafen + JSX-härledda "från kod"-noder).
- Klick i sidolistor (t.ex. i Kod + Preview) byter bara aktiv nod utan att ändra zoom på kartan.
- Noder som inte är i fokus tonas ned så att du behåller överblick över hela kartan.
Kodredigerare & live preview
Redigeraren använder Monaco med syntaxhighlighting och vanliga kortkommandon.
- Run — uppdaterar live preview (Sandpack) med aktuellt innehåll i editorn. Preview följer inte varje tangenttryck; den uppdateras vid Run eller när du byter aktiv nod (då laddas den nodens kod i preview).
- Spara — uppdaterar nodens kod i projektet (och fil i WebContainer när det gäller).
- Om du får AI-förslag visas en diff; du kan acceptera eller avvisa innan koden slår igenom.
Importera kod
GitHub (från startsidan)
Ange en giltig GitHub-URL till ett publikt repo och tryck Importera. Projektet byggs om till noder baserat på filstruktur och innehåll.
Repomix
Exportera repot med Repomix, ladda sedan upp XML-filen på /dashboard/import.
AI-förslag (Claude)
I relevanta vyer kan du chatta med en assistent som föreslår ändringar i koden för den aktiva noden. Förslag kan strömmas in; när ett kodblock är klart kan du granska det i editorn och acceptera eller avvisa.
Vilken modell som anropas styrs av er backend (/api/suggest).
Tips & kortkommandon
- Esc på nodkartan — en nivå upp när du zoomat in i en nod.
- ⌘/Ctrl + S i editorn — spara (och kör preview enligt nuvarande inställning i kodpanelen).
- Byt mellan filer/noder via flikar eller noder i listan när flera filer är kopplade till projektet.
- Layout på nodkartan (horisontell/vertikal) kan ofta växlas i vyns header där det finns.
Produkt och gränssnitt utvecklas löpande — om något i den här guiden skiljer sig från det du ser i appen, gäller alltid det som visas i gränssnittet.
Redo att bygga med överblick?
Gå till dashboard →