drawfig targets research and engineering diagrams: use familiar draw.io interactions in the browser to build vector figures, then export TikZ, PNG, or PDF on demand, or combine AI features to turn sketches into editable drafts faster. This article walks through editor → AI canvas → img2graph → accounts & files → deployment & troubleshooting so you build a coherent mental model instead of scattered feature notes.
The shape and connector library sits on the left, an infinite canvas in the center, and style/properties on the right. Compared with generic flowchart tools, drawfig emphasizes controllable layout for nodes, edges, and labels: orthogonal/curved connectors, arrow styles, vertex numbering, and math symbols can align with notation habits in LaTeX papers.
A practical workflow: fix the graph topology (vertices and edges) first, unify fonts and stroke widths second, then handle legends and export resolution. Multi-page documents suit splitting “main figure / appendix detail”; layers help stack background grids or watermarks without affecting the exported subject.
For saving, signed-in users can persist diagrams to “My diagrams” via the portal API, complementing local .drawio backups; guest mode still allows local editing for quick experiments. Shortcuts and menu items match upstream draw.io—see the help panel for the full list.
Research writing often needs vector consistency: choose Export TikZ in the menu to get code close to the current canvas styling and paste it into your LaTeX project. If a journal or conference template mandates specific fonts, unify font family and size in the editor before export to reduce manual replacement later.
For bitmap export (e.g. PNG), watch canvas bounds and scale factor to avoid blurry lines; for print, prefer SVG or PDF vector paths. Figures with heavy transparency or filters may render slightly differently across export paths—compile or place once in the target environment before final submission.
TikZ credits (sign-in required): import 5 credits per use · export 3 credits per use. You receive 30 credits daily (accumulated). Full details: /pricing#credits-rules.
AI canvas does not replace hand drawing—it turns intent into executable steps: the browser sends a planning request to a same-origin path (proxied by the portal to a dedicated AI canvas service), and the response often includes an actions list. A frontend plugin applies those steps in order—creating shapes, connectors, or style tweaks—matching the sidebar executor behavior.
canvasScript, explicit user consent is required, and the server filters dangerous keywords—preventing unreviewed code from operating on the page.In practice, treat AI as a first-draft generator: after generation, hand-tune alignment, line styles, and labels, then export TikZ or save to the cloud. API keys and model config usually live in deployment environment variables (OpenAI or compatible gateways), separate from the portal process, so keys can rotate without frontend changes.
AI canvas credits (sign-in required): 5 credits per use · 30 credits granted daily. See /pricing#credits-rules.
When you only have a photo of a paper figure, a whiteboard shot, or a scanned sketch, the img2graph path “rebuilds” the bitmap into objects you can drag in the editor. Requests are forwarded by the portal to a dedicated service (default local fixed port; point elsewhere via environment variables).
Best practices: provide high-contrast input with complete lines; busy backgrounds interfere with vectorization. After rebuild, verify topology on canvas—especially degree-2 chains and dangling vertices, where automatic detection may differ from what you expect.
Like AI canvas, img2graph can share the same .env pattern for keys and ops; health endpoints support monitoring or startup self-checks.
After sign-up, the dashboard aggregates “My diagrams,” folders, and search; the editor top bar returns to the gallery or the user guide. Editable share links suit short-term co-editing, but treat link secrets as sensitive—assess risk before public sharing.
When multiple people write the same diagram, the server may use version numbers or optimistic locking; on conflict, follow prompts—merge locally or pick the server version—rather than silently overwriting.
The portal process usually serves static frontend assets and registers API routes; ensure route registration order is correct so new pages are not swallowed by static file rules. If HTTPS terminates at a reverse proxy, pass X-Forwarded-Proto and related headers correctly to avoid cookie or redirect issues.
Rate limiting and login lockout are common protections; if scripts call APIs, throttle frequency and handle 429 responses. When AI and image services depend on external models or GPUs, troubleshoot in order: local health check → portal proxy logs → upstream service logs → keys and quotas.
drawfig keeps paper-grade graph drawing in one interaction stack: hand drawing and AI drafts, bitmap rebuild and TikZ finals can be tried in parallel. This article cannot replace the official changelog; if menu items differ by build, trust your current deployment and cross-check the feature index in the portal user guide (/learn).
Happy diagramming—more short posts and updates on the blog list.