App
DocsTutorialsTutorial 5: Generate Documentation from Your Architecture Diagram

Generate Documentation from Your Architecture Diagram

What you'll build

In this tutorial, you will take an architecture diagram on your Rekhic canvas and convert it into a structured GitHub-Flavored Markdown specification (ARCHITECTURE.md) detailing applications, services, data stores, external dependencies, and relationship flows.


Before you start

  • Have an open diagram in your workspace (/diagram), or create a quick diagram using Tutorial 1 or a template from Templates.

Step 1: Label and Categorize Your Components

Before exporting documentation, ensure your canvas nodes have meaningful labels and categories:

  1. Double-click the main application node and verify its label (e.g. Web Frontend).
  2. Verify that service nodes are labeled (e.g. Payment Service, Order API).
  3. Set technology tags using the context toolbar (e.g. Node.js, Go, PostgreSQL).
  4. Ensure databases are styled with the ellipse shape or database category.

Step 2: Label Connection Edges

Relationships in your documentation are derived from the connectors between nodes:

  1. Double-click each connector edge between components.
  2. Add a descriptive protocol or purpose:
    • Between Frontend and Gateway: HTTPS /api
    • Between Gateway and Service: gRPC
    • Between Service and DB: SQL read/write
    • Between Service and Cache: Redis TCP

Step 3: Trigger the Markdown Exporter

  1. In the top navigation bar of the workspace, click the Export Markdown button.
  2. Rekhic parses the nodes, categories, and connected edges in your active drawing.
  3. A modal appears displaying the rendered Markdown preview and raw markdown code.

Review the generated architecture

Review the generated sections in the modal:

  • # System Architecture: Includes your diagram name and description.
  • ## Applications: Contains all frontend and client components.
  • ## Services: Lists all microservices and API gateways.
  • ## Data Stores: Catalogs all databases and caches.
  • ## Relationships / Data Flow: Shows the full dependency flow formatted as:
    markdown
    - **Source** -> **Target** (*Protocol*)

Customize the diagram

If you notice any missing items or unclassified components:

  1. Close the export modal.
  2. Adjust node categories or add missing connector labels directly on the canvas.
  3. Click Export Markdown again—the export updates instantly with your edits.

Export your result

  1. In the export modal, click Copy to Clipboard to paste directly into Notion, Confluence, or a pull request description.
  2. Or click Download Markdown to save an ARCHITECTURE.md file.
  3. Commit this file to the root of your project repository alongside README.md.

Tips

  • Keep connector labels concise (e.g. REST /v1/orders or Kafka Topic: orders.events) so the relationship list remains scannable.
  • Combine the exported Markdown with an exported PNG image for a complete documentation package.

Limitations

  • The markdown generator documents nodes and edges present on the active canvas. Freehand drawings or loose text boxes are excluded from the formal component tables.
Need help? Contact Support