FlowIcon

Dokumentasi

Panduan memakai FlowIcon: dua mode editor, diagram-as-code, pustaka icon, kolaborasi, berbagi, dan ekspor.

Dasar

Memulai

Masuk dengan alamat surel: tidak ada kata sandi, dan tidak ada pendaftaran tersendiri — akun dibuatkan pada kali pertama kamu masuk, beserta satu workspace pribadi.

Dokumen dibuat dari halaman workspace. Setiap dokumen memiliki satu mode dan tidak berpindah mode: pilih saat membuatnya.

dari surel ke workspace
alamat sureltautanworkspace

Dua mode dokumen

Kanvas bebas untuk berpikir: kotak, panah, tulisan tangan, gambar. Cocok saat bentuknya belum jelas.

Diagram-as-code untuk yang harus tetap rapi setiap kali berubah: kamu menulis sumbernya, tata letaknya dihitung. Panel sumber terbuka di sebelah kanvas pada layar lebar, dan menyusul lebar layar pada ponsel.

dua cara menggambar
kanvas bebasdiagram-as-code

Menulis

Menulis diagram

Satu node per baris. Atribut ditulis di dalam kurung siku: `icon` memilih ikon dari pak yang tersedia, `label` mengganti tulisan yang tampil tanpa mengubah namanya sebagai pengenal.

Relasi memakai `>` untuk berpanah, `-` untuk garis polos, dan `<>` untuk dua arah. Label relasi ditulis sesudah titik dua, dan tertulis persis seperti yang kamu ketik.

`group` mengelompokkan node ke dalam satu kotak. Grup bersarang sengaja tidak diizinkan: dua tingkat kotak membuat tata letaknya sulit dibaca, dan hampir selalu ada cara yang lebih jelas.

Tabel berkolom menghasilkan diagram ERD. Penanda `pk` dan `fk` menentukan bentuk hubungannya, dan `?` menandai kolom yang boleh kosong.

Gerakan di bawah menjelaskan satu hal yang sulit dijelaskan kalimat: setiap baris sumber adalah sebab, dan yang muncul di gambar adalah akibatnya. Tekan Putar ulang untuk melihatnya sekali lagi.

Sumber, dan diagram yang tumbuh mengikutinya
direction right Browser [icon: generic/browser]Api [icon: generic/api, label: "API Server"] group Inti [label: "Layanan inti"] {  Db [icon: stack/postgresql]  Cache [icon: stack/redis]} Browser > Api: HTTPApi > Db: queryApi - Cache
Layanan intiBrowserApiDbCacheHTTPquery
users {
  id uuid pk
  email text
  deleted_at timestamp?
}

memberships {
  id uuid pk
  user_id uuid fk
  role text
}

users.id < memberships.user_id

Diagram dari kalimat

Tulis apa yang ingin digambar, dan sumbernya disusun untukmu — lalu kamu yang menyuntingnya. Hasilnya selalu ditampilkan sebagai sumber, bukan langsung ditimpakan ke dokumen.

Ada kuota harian per akun. Kotaknya tidak muncul sama sekali bila pemasangan ini tidak dikonfigurasi dengan penyedia AI.

kalimat menjadi sumber
"gateway, dua layanan, dan satu basis data"Client [icon: generic/browser]Api [icon: generic/api]Client > Apihasilnya sumber yang kamu sunting, bukan dokumen yang tertimpa

Masuk dan keluar

Mengimpor

Dari Mermaid: tempel `flowchart` atau `graph`, dan hasilnya ditampilkan lebih dulu beserta setiap hal yang tidak dapat dibawa — bentuk node yang diratakan, gaya yang dibuang, subgraph bersarang.

Dari berkas proyek: jatuhkan `docker-compose.yml`, `package.json`, atau berkas kode. Layanan beserta `depends_on`, paket workspace beserta ketergantungannya, dan hubungan antar-direktori dari `import` di kode. Berkasnya dibaca di peramban dan tidak pernah diunggah.

Dokumen kanvas dapat menerima berkas `.excalidraw`.

berkas menjadi diagram
docker-compose.ymlwebdbcachedibaca di peramban

Mengekspor

SVG dan PNG untuk gambar, PDF untuk dicetak atau disisipkan ke dokumen. Ketiganya disusun di peramban — isi dokumen tidak dikirim ke mana pun untuk dirender.

Dokumen diagram-as-code juga dapat diekspor sebagai Mermaid, sebagai berkas `.mmd` atau disalin untuk ditempel ke README. Yang tidak punya padanan di Mermaid — ikon, warna — disebutkan, bukan hilang diam-diam.

satu dokumen, empat berkas
dokumenSVGPNGPDF.mmd

Bekerja bersama

Berbagi dan menyematkan

Tautan berbagi punya tiga cakupan: melihat, berkomentar, dan menyunting. Tautannya dapat diberi sandi dan masa berlaku, dan dapat dicabut kapan saja.

Tautan Lihat dapat disematkan ke halaman lain lewat kode sematan. Tautan Sunting tidak dapat: kode sematan menerbitkan tokennya ke sumber halaman, dan token Sunting memberi hak mengubah dokumen.

satu tautan, tiga cakupan
dokumentautanmelihatberkomentarmenyunting

Komentar

Komentar berbenang dan menempel pada elemen. Menyebut anggota lain dengan `@` mengirimkan pemberitahuan lewat surel; pemberitahuan itu dapat dimatikan per benang.

Tamu tautan dapat ikut berkomentar bila tautannya memang diterbitkan untuk itu.

benang di atas elemen
elemen

Pengelolaan

Workspace, peran, dan pemulihan

Empat peran: owner, admin, editor, viewer. Undangan dikirim lewat surel dan dapat dicabut sebelum diterima.

Dokumen yang dihapus masuk ke Trash dan dapat dipulihkan; project dapat diarsipkan tanpa kehilangan isinya. Catatan audit mencatat siapa melakukan apa di workspace itu.

Halaman Pengaturan → Umum memuat nama dan logo workspace, penyerahan kepemilikan, keluar dari workspace, dan penghapusannya. Workspace yang dihapus hilang seketika bagi semua anggota dan dilepas permanen setelah 30 hari; owner terakhir harus menyerahkan kepemilikan lebih dulu sebelum dapat keluar.

empat peran
viewereditoradminownerhak bertambah ke kanan; yang di kiri tidak pernah kehilangan akses baca

Masuk lewat penyedia identitas sendiri

Workspace berpaket Team dapat mengarahkan anggotanya masuk lewat penyedia OIDC miliknya sendiri — Entra ID, Okta, Google Workspace, Keycloak, dan sejenisnya.

Domainnya harus terbukti milikmu lebih dulu, lewat satu catatan DNS. Sebelum terbukti, tidak ada alamat yang diarahkan ke penyediamu. Satu workspace memakai satu domain.

masuk lewat penyedia identitas
alamat sureldomain terbukti lewat DNSpenyedia identitasmasuk sebagai dirinya

Akun dan datamu

Pengaturan → Akun memuat nama tampilan, foto, bahasa, dan penghapusan akun. Nama boleh dikosongkan — kamu akan tampil sebagai potongan alamat surelmu — sedangkan alamat surelnya sendiri tidak dapat diubah: ia identitas masukmu, bukan tampilanmu.

Menghapus akun menuntut kode konfirmasi yang dikirim ke alamat surelmu — mengetik ulang alamat yang sudah tertulis di layar bukan bukti apa pun. Sesudah kodenya diterima, penghapusan berlaku seketika: seluruh sesi berakhir, kamu hilang dari daftar anggota setiap workspace, dan alamatmu tidak dapat dipakai masuk lagi. Barisnya dilepas permanen setelah 30 hari beserta komentar yang kamu tulis. Workspace yang hanya berisi kamu ikut terhapus; yang masih berisi orang lain harus diserahkan atau dihapus lebih dulu.

yang ikut, dan yang tertinggal
akunworkspace pribadiworkspace bersamatetap utuh

Dokumentasi

Alat, pintasan, dan batas

Seluruh daftar di bawah ini berlaku pada editor yang berjalan hari ini. Pertanyaan yang lebih umum dijawab di halaman FAQ.

Alat kanvas tekan angkanya

  • Pilih1
  • Persegi2
  • Elips3
  • Wajik4
  • Panah5
  • Garis6
  • Pena7
  • Teks8

Setelah satu bentuk selesai digambar, alat kembali ke Pilih dengan sendirinya. Gambar bisa ditempel langsung dari papan klip atau dijatuhkan ke kanvas sebagai berkas.

Pintasan

⌘/CtrlZ
Batalkan
⇧⌘/CtrlZ
Ulangi
Del⌫
Hapus yang terpilih
Esc
Lepas seleksi
⇧klik
Tambah atau lepas satu elemen
⇧seret gagang
Ubah ukuran dengan rasio tetap
⇧putar
Kunci sudut ke kelipatan tetap
ganda-klik
Tulis teks di titik itu
roda
Geser kanvas
⌘/Ctrlroda
Perbesar dan perkecil
seret tengah
Geser tanpa berganti alat

Gaya dan batas

Penyimpanan
Otomatis, 0,8 detik setelah perubahan terakhir
Elemen per dokumen
5.000
Ukuran satu dokumen
8 MB
Zoom
2% sampai 3.000%
Peran workspace
owner, admin, editor, viewer
Paket gratis
3 dokumen

Panel gaya menyediakan enam warna garis dan enam warna latar, tiga ketebalan, tiga jenis huruf, dan opasitas 10–100%. Isian dan kekasaran garis hanya berlaku di mode kanvas, karena hanya di sana garis digambar seperti goresan tangan.

Yang belum ada