Getting started

1. Sign in with your email and password, or with Google where it is switched on. New accounts are created with a sign-up code, or by following an invitation link from a workspace owner.
2. A workspace is a team's space: its model, diagrams, flows, comments and history. You can have several; switch with the workspace name in the header.
3. Your role in a workspace is owner (everything, plus members), editor (edit, share, save versions) or viewer (read only; they can still export).
4. Inside a workspace the left menu has: Diagrams, Model, Connections, Dependencies, Flows, Comments, Technology, History and Members. Open a diagram and the menu gives way to a canvas with Home and Flows buttons at its left edge.

On Diagrams, New board creates a diagram, folders group them, and Import diagram brings in a file (see Share, export, import).

Diagrams and C4 levels

ArchLens follows the C4 model. Each level is a view of the same workspace:

• Go down: double-click a system or container (or press Enter on it). Go up: click an earlier crumb in the trail at the top (Context › System › …) or press Alt+↑.
• Double-clicking a Store opens its tables, one level further down (see Data stores).
• Connections between hidden children are rolled up: the Context view shows a line between two systems when something inside them talks.
• Search & filter (Ctrl/⌘+K or /) jumps to an object, and filters the view by tag or status.
• Fit (F), the zoom buttons, Auto layout and an optional minimap are on the left of the canvas.

Objects and connections

Add and edit

Use the toolbar at the bottom (or its letter keys), then click the canvas to place the object. Select an object to edit it in the details panel: name, technology (known technologies bring their logo), status (live, future, deprecated, removed), icon and size, description, tags, external for systems and people outside your organisation, and text style. Double-click the name on the canvas to rename in place.

Connections

• Create: drag from a connection point (it appears when you hover or select an object) to another object's point. On a touch screen the point is bigger and snaps to the nearest one within a fingertip; Connect to… in the details panel is the no-drag alternative.
• Move an end: select the line and drag either end to another object or point (works for a direct connection; a rolled-up line stands for several and has no single end).
• Label and protocol: double-click the line to type a label; the connection's technology/protocol (several allowed, e.g. HTTPS, WSS) is edited in its details and shown in brackets.
• Look: one-way, two-way or plain; curved, straight or stepped. Select a line and drag the dot in its middle to push it sideways; double-click the dot to reset. Drag the label along the line.

Tags, reuse, groups

• Tags are named colours you attach to objects and connections; manage them on the Model page.
• Reuse: right-click empty canvas to place an existing object again, so a long diagram can show it twice. It stays one object.
• Group a selection (Ctrl/⌘+G) to move it together; bring forward / send back with Ctrl+] and [.
• Component store: save an object with everything below it as a template from its details; the saved ones are listed on the Model page and inserted into other diagrams from the right-click menu.

The shared model

Objects and connections belong to the workspace, not to one diagram. A diagram is a selection of them, so renaming an object changes it everywhere, and deleting a diagram keeps its objects. The left-menu pages are different ways to see and edit the same model:

Flows and sequence

A flow is an ordered list of steps over the connections you already drew. Create one on the Flows page, or from the Flows panel inside a diagram (select a connection on the canvas, then Add selected connection).

• Step kinds: a connection (a message), a parallel step (several connections at once), a process or information card (text), and continue in another flow.
• Play it: pick the flow on a diagram and use the player ([ ] to step, Space to play). Only the steps the current level can show light up.
• Sequence tab (Flows page): the same flow drawn as a sequence diagram, one column per object in the order they take part. Mark a connection step as a reply (the ↩ button in the steps list) and its arrow runs back, dashed. Click a row to select that step. Copy Mermaid and Copy PlantUML give the diagram as text for a README or wiki.

Data stores and tables

A Store (a database, queue or file store at Container level) can describe its tables. Double-click the store, or choose Tables… in its details. The tables are a level below the store: the trail reads Context › System › Store.

• Add tables and columns: name, SQL type (suggestions included), PK primary key, NN not null, UQ unique, and a reference to another table's column (a foreign key). Deleting a table or column removes the references to it.
• The ER diagram beside the editor draws every table and an arrow per foreign key; drag the table boxes to arrange them, they stay put.
• Export: Copy SQL / Download .sql (PostgreSQL: CREATE TABLE for all tables, then the foreign keys as ALTER TABLE … ADD CONSTRAINT), and Copy Mermaid ER.
• Import SQL: paste or choose CREATE TABLE statements (PostgreSQL, SQLite or MySQL). Tables of the same name are replaced; indexes and other statements are skipped and counted. Handy to start from an existing schema.

Draw mode and notes

The Diagram / Draw switch at the top left (W) changes what your pointer does.

• Diagram mode edits the model. Its toolbar also has shapes, text, notes, images and the comment tool. These are annotations: they are not part of the C4 model.
• Draw mode is a whiteboard layer above everything: Pan, Pencil (colour, width, solid / dashed / faint) and Eraser, plus Clear for the view. The diagram underneath cannot be touched or selected while you draw.
• Select (V) drags a box on empty canvas; Hand (H) makes a one-pointer drag move the view instead. Scrolling, a two-finger drag or a right-button drag always moves it.

Comments

Comment on an object or connection from its details panel, or choose the Comment tool and click the canvas to leave a pinned balloon that can be dragged. Replies form a thread; Resolve hides a thread (the Comments page can show resolved ones). People appear by their display name (set in your profile).

Versions and drafts

• Versions (History page): Save version keeps a named snapshot of the whole workspace. Open one read-only, compare it with now to see what was added, changed or removed, or restore it (the restore itself can be undone). A snapshot is also saved automatically every night.
• Drafts: a branch of the workspace to try changes apart. Switch to it with the branch picker in the header (it reads Main by default), edit freely, review the difference, then merge it into Main or discard it. Merging is a conflict-free merge: if both sides changed the same property, the later change wins.

Share, export, import

Share

Share (top right) creates a read-only link to one diagram. Anyone with the link can look, pan, open levels and play flows, without an account; the page shows live changes. Revoke the link any time. Copy embed code gives an <iframe> for a wiki or Confluence page (the site allows framing of share links only).

Export

Import

Import diagram on the Diagrams page creates a new diagram from a file: an ArchLens .json file, or the model part of a Structurizr DSL file (person, softwareSystem, container, component and a -> b "label" "technology"; a container tagged Database becomes a store, one tagged External is external). Views, styles and other parts of a DSL file are skipped and counted. Anything the model rules refuse (for example a link between an object and its own parent) is left out and counted. Imported diagrams open auto-arranged. Files up to 5 MB.

Phone and tablet

ArchLens works in a mobile browser and installs like an app: use Add to Home Screen (iOS) or Install (Android, Chrome). Opening it needs a network (it is a live workspace), but the app itself starts from the device.

On a phone-sized screen the left menu is a rail and the header trims itself to fit. Editing is possible on phones, but a tablet or computer is more comfortable for building diagrams.

Keyboard shortcuts

Press ? in a diagram for the list. Ctrl is ⌘ on a Mac.

Account and plans

• Profile (Settings ⚙ › Profile): a display name that people see instead of the start of your email (on comments, drafts, versions, members and next to your cursor), and password change for accounts that have one. Settings also switches the language (English / ไทย) and signs you out.
• Plans: the free plan allows 3 workspaces you own, 4 people per workspace, and 5 uploaded pictures of up to 200 KB per workspace. Limits are checked on the server and shown where they apply.
• Privacy and terms: Privacy Policy, Terms.

เริ่มต้น

• เข้าสู่ระบบด้วยอีเมลและรหัสผ่านหรือ Google บัญชีใหม่สมัครด้วยรหัสสมัคร หรือกดลิงก์เชิญจากเจ้าของ workspace
• Workspace คือพื้นที่ของทีม มีโมเดล ไดอะแกรม โฟลว์ คอมเมนต์ และประวัติ มีได้หลายอัน สลับจากชื่อ workspace ที่หัวเว็บ
• บทบาท: owner ทำได้ทุกอย่างและจัดการสมาชิก, editor แก้ แชร์ และบันทึกเวอร์ชันได้, viewer ดูอย่างเดียว (ส่งออกได้)
• เมนูซ้ายมี Diagrams, Model, Connections, Dependencies, Flows, Comments, Technology, History, Members เมื่อเปิดไดอะแกรมจะเหลือปุ่ม Home กับ Flows ที่ขอบซ้ายของแคนวาส

ไดอะแกรมและระดับ C4

• ลงระดับล่าง: ดับเบิลคลิกระบบหรือ container (หรือกด Enter) ขึ้นระดับบน: กดชื่อก่อนหน้าในแถบเส้นทางด้านบน หรือ Alt+↑
• ดับเบิลคลิก Store จะเปิดตารางของมัน เป็นอีกระดับที่อยู่ลึกลงไป
• เส้นเชื่อมระหว่างของที่ซ่อนอยู่จะถูกรวมขึ้นมา: หน้า Context แสดงเส้นระหว่างสองระบบเมื่อมีสิ่งข้างในคุยกัน
• ค้นหาและกรองด้วย Ctrl/⌘+K หรือ / พอดีหน้าจอด้วย F

วัตถุและเส้นเชื่อม

• เพิ่มจากแถบเครื่องมือด้านล่าง (หรือปุ่มตัวอักษร) แล้วคลิกแคนวาส เลือกวัตถุเพื่อแก้ในแผงรายละเอียด: ชื่อ เทคโนโลยี (เทคโนโลยีที่รู้จักมีโลโก้) สถานะ (live, future, deprecated, removed) ไอคอน คำอธิบาย แท็ก และ external สำหรับสิ่งนอกองค์กร
• สร้างเส้นเชื่อม: ลากจากจุดเชื่อมของวัตถุหนึ่งไปจุดของอีกวัตถุ บนจอสัมผัสจุดใหญ่ขึ้นและดูดเข้าจุดที่ใกล้ที่สุด หรือใช้ Connect to… ในแผงรายละเอียดแทนการลาก
• ย้ายปลายเส้น: เลือกเส้นแล้วลากปลายข้างใดข้างหนึ่งไปยังวัตถุอื่น (ใช้ได้กับเส้นตรง ๆ ที่เป็นความสัมพันธ์เดียว ส่วนเส้นที่รวมหลายความสัมพันธ์ย้ายปลายไม่ได้)
• ป้ายและโปรโตคอล: ดับเบิลคลิกเส้นเพื่อใส่ป้าย โปรโตคอลหลายค่าได้ เช่น HTTPS, WSS
• รูปแบบเส้น: ทางเดียว สองทาง หรือไม่มีหัวลูกศร โค้ง ตรง หรือหักมุม เลือกเส้นแล้วลากจุดกลางเส้นเพื่อดัน ดับเบิลคลิกจุดเพื่อรีเซ็ต
• แท็ก คือสีที่มีชื่อ ติดกับวัตถุและเส้นเชื่อม จัดการที่หน้า Model Reuse วางวัตถุเดิมซ้ำอีกที่บนไดอะแกรม Group ด้วย Ctrl+G และ Component store บันทึกวัตถุพร้อมของข้างใน เป็นแม่แบบไปใช้ในไดอะแกรมอื่น

โมเดลที่ใช้ร่วมกัน

วัตถุและเส้นเชื่อมเป็นของ workspace ไม่ใช่ของไดอะแกรมใดไดอะแกรมหนึ่ง ไดอะแกรมคือการเลือกบางส่วนมาแสดง เปลี่ยนชื่อวัตถุที่เดียวก็เปลี่ยนทุกที่ และลบไดอะแกรมแล้ววัตถุยังอยู่ หน้าในเมนูซ้ายคือมุมมองต่าง ๆ ของโมเดลเดียวกัน: Model (ต้นไม้ของทุกวัตถุ), Connections (ตารางเส้นเชื่อม), Dependencies (ใครพึ่งใคร), Flows, Comments, Technology, History, Members

โฟลว์และ sequence

• โฟลว์ คือลำดับขั้นตอนบนเส้นเชื่อมที่วาดไว้แล้ว สร้างที่หน้า Flows หรือจากแผง Flows ในไดอะแกรม ขั้นมีหลายแบบ: เส้นเชื่อม ขั้นขนาน การ์ดข้อความ (process/information) และ "ไปต่อที่" โฟลว์อื่น
• เล่น: เลือกโฟลว์บนไดอะแกรมแล้วใช้ตัวเล่น ([ ] ข้ามขั้น Space เล่น)
• แท็บ Sequence: โฟลว์เดียวกันที่วาดเป็นแผนผังลำดับ หนึ่งคอลัมน์ต่อหนึ่งวัตถุ ติ๊กขั้นเป็น คำตอบกลับ (ปุ่ม ↩ ในรายการขั้นตอน) ลูกศรจะวิ่งย้อนเป็นเส้นประ มีปุ่มคัดลอกเป็น Mermaid และ PlantUML

ที่เก็บข้อมูลและตาราง

• ดับเบิลคลิก Store หรือ Tables… ในแผงรายละเอียด เพิ่มตารางและคอลัมน์: ชื่อ ชนิด SQL, PK primary key, NN ห้ามว่าง, UQ ไม่ซ้ำ และ reference ไปคอลัมน์ของตารางอื่น (foreign key) ลบตารางหรือคอลัมน์แล้วการอ้างอิงถึงมันหายไปด้วย
• แผนผัง ER ข้างตัวแก้ไข ลากกล่องตารางจัดวางได้ และอยู่ที่เดิม
• ส่งออก: Copy SQL / Download .sql (PostgreSQL) และ Copy Mermaid ER นำเข้า SQL: วางหรือเลือกไฟล์ที่มี CREATE TABLE (PostgreSQL, SQLite, MySQL) ตารางชื่อซ้ำจะถูกแทนที่ คำสั่งอื่นถูกข้าม

โหมดวาดและโน้ต

• สวิตช์ Diagram / Draw (W): Diagram แก้โมเดล (มีรูปทรง ข้อความ โน้ต รูปภาพ และเครื่องมือคอมเมนต์ ซึ่งเป็นคำอธิบายเพิ่ม ไม่ใช่ส่วนของ C4) ส่วน Draw เป็นชั้นไวต์บอร์ดอยู่เหนือทุกอย่าง มี Pan, ดินสอ, ยางลบ และ Clear
• Select (V) ลากเป็นกรอบเลือก Hand (H) ลากเป็นเลื่อนมุมมอง สกรอลล์ ลากสองนิ้ว หรือลากปุ่มขวาเลื่อนมุมมองได้เสมอ

คอมเมนต์

คอมเมนต์ที่วัตถุหรือเส้นเชื่อมจากแผงรายละเอียด หรือใช้เครื่องมือ Comment คลิกแคนวาสเพื่อปักลูกโป่งที่ลากย้ายได้ ตอบกลับเป็นเธรด กด Resolve เพื่อซ่อน คนแสดงด้วยชื่อที่ตั้งในโปรไฟล์

เวอร์ชันและ draft

• เวอร์ชัน (หน้า History): Save version เก็บภาพรวมทั้ง workspace เปิดดูแบบอ่านอย่างเดียว เปรียบเทียบกับปัจจุบัน หรือ กู้คืน (ย้อนการกู้คืนได้) ระบบบันทึกอัตโนมัติทุกคืนด้วย
• Draft คือกิ่งไว้ลองแก้แยกจาก Main สลับด้วยตัวเลือกกิ่งที่หัวเว็บ แก้ได้อิสระ ดูความต่าง แล้ว merge เข้า Main หรือ discard ถ้าสองฝั่งแก้ค่าเดียวกัน ค่าที่แก้ทีหลังชนะ

แชร์ ส่งออก นำเข้า

• Share สร้างลิงก์อ่านอย่างเดียวของหนึ่งไดอะแกรม ใครมีลิงก์ก็ดูได้โดยไม่ต้องมีบัญชี และเห็นการแก้ไขสด ยกเลิกลิงก์ได้ทุกเมื่อ มีโค้ดฝัง <iframe> สำหรับวิกิหรือ Confluence
• ส่งออก: PNG/SVG (มีตัวอย่างให้เลือกธีม พื้นโปร่งใส ขนาด และครอป), ZIP ทุกมุมมอง, Mermaid C4 / PlantUML C4 ของระดับปัจจุบัน, ไฟล์ไดอะแกรม JSON (ย้ายไป workspace อื่นหรือสำรองข้อมูล)
• นำเข้า ที่หน้า Diagrams: ไฟล์ .json ของ ArchLens หรือส่วนโมเดลของไฟล์ Structurizr DSL (ส่วน views และ styles ถูกข้าม สิ่งที่ผิดกฎโมเดลถูกตัดออกและแจ้งจำนวน) ไฟล์ไม่เกิน 5 MB และไดอะแกรมที่นำเข้าจะจัดวางอัตโนมัติ

มือถือและแท็บเล็ต

ใช้ผ่านเบราว์เซอร์มือถือได้ และติดตั้งเป็นแอปได้ (Add to Home Screen บน iOS หรือ Install บน Android/Chrome) ต้องมีอินเทอร์เน็ตเพราะเป็น workspace สด

• เลื่อนมุมมอง: ลากพื้นที่ว่าง หรือสองนิ้ว (ตอนเปิดเครื่องมือวาดอยู่ใช้สองนิ้ว) ซูม: pinch
• แตะวัตถุเพื่อเลือก แผงรายละเอียดเปิดเมื่อแตะ ไม่เปิดตอนลากวัตถุ แตะที่ว่างเพื่อปิด
• เมนูคลิกขวา: กดนิ้วค้างครึ่งวินาที ลงระดับล่าง: กดวัตถุค้างแล้วเลือก Open
• เชื่อมวัตถุ: ลากจากจุดเชื่อม หรือใช้ Connect to… ย้ายปลายเส้น: แตะเส้นแล้วลากปลาย ดัดเส้น: แตะแล้วลากวงกลมกลางเส้น

บัญชีและแพ็กเกจ

• โปรไฟล์ (ตั้งค่า ⚙ › Profile): ตั้งชื่อที่แสดงแทนส่วนต้นของอีเมล (บนคอมเมนต์ draft เวอร์ชัน สมาชิก และข้างเคอร์เซอร์) และเปลี่ยนรหัสผ่าน ตั้งค่ายังสลับภาษา English / ไทย และออกจากระบบ
• แพ็กเกจ Free: เป็นเจ้าของได้ 3 workspace, 4 คนต่อ workspace, รูปที่อัปโหลด 5 รูป รูปละไม่เกิน 200 KB ต่อ workspace ระบบตรวจฝั่งเซิร์ฟเวอร์
• นโยบายความเป็นส่วนตัว · ข้อกำหนด