App
DocsTutorialsTutorial 3: Turn Source Code into an Architecture Diagram

Turn Source Code into an Architecture Diagram

What you'll build

In this tutorial, you will inspect an existing software project codebase (such as a Node.js, Spring Boot, or Python repository) and generate an architecture topology detailing its application tiers, background workers, and persistent databases.


Before you start

  • Have access to a local project directory containing configuration manifests (such as package.json, docker-compose.yml, pom.xml, or requirements.txt).
  • Alternatively, you can use the built-in Load Sample code bundle inside Rekhic.

Step 1: Open the Code Generator

  1. Navigate to Generators -> Code (/import/code).
  2. The Code Analyzer workspace opens, displaying the file tree and code inspection pane.

Step 2: Upload or Select Project Files

  1. Drag and drop your project's configuration files (or the whole project folder) into the upload target.
  2. Key files to include for high-fidelity architecture detection:
    • Root manifest: package.json, pom.xml, go.mod, or requirements.txt.
    • Infrastructure: docker-compose.yml or Dockerfile.
    • Entry points: src/index.ts, server.js, main.py, or Application.java.
  3. If testing without files, click Load Sample to populate a multi-tier Node.js + Prisma + PostgreSQL configuration.

Step 3: Run the Local Analysis

  1. Click Analyze Code.
  2. Rekhic runs its client-side AST and pattern analyzer:
    • Evaluates declared dependencies to identify frameworks (Next.js, Express) and database drivers (pg, mongoose, redis).
    • Analyzes docker-compose.yml services, container images, and mapped network ports.
    • Detects API route paths and service handlers.

Review the generated architecture

In the Architecture Preview pane:

  • Verify that your application frontends, APIs, and databases were detected correctly.
  • Check that technology badges correspond to your actual runtimes.
  • Inspect the relationship graph.

Customize the diagram

  1. Click Open in Canvas to instantiate the diagram.
  2. Group related worker processes inside a boundary container (e.g. Background Queue Workers).
  3. Add any third-party external APIs (such as payment processors or email providers) that might not be declared directly in your local manifests.
  4. Use Auto Layout (TB) to align the services vertically from public ingress down to storage.

Export your result

  1. Click Export to download a 2x PNG image.
  2. Click Export Markdown to generate a Markdown summary of all detected components and relationships.
  3. Commit the markdown file as ARCHITECTURE.md to your repository so your team has an accurate, up-to-date architecture reference.

Tips

  • Including docker-compose.yml provides the highest fidelity detection for multi-container local topologies.
  • For monorepos (e.g. Turborepo, Nx, or Maven multi-module), include the root manifest along with each package's individual manifest.

Limitations

  • Analysis runs entirely in your local browser runtime. Heavy binary files, build artifacts (node_modules/, target/, dist/), and minified bundles are ignored.
  • Dynamic runtime connections created purely via runtime reflection or environment variables cannot always be inferred statically. Always review generated connections before finalizing.
Need help? Contact Support