CodeCharta auf Englisch

CodeCharta is an open source tool for analyzing and visualizing(link) software architectures(link) that has been developed mainly by MaibornWolff GmbH(source) since March 2017. It enables the structure and quality of software projects to be better understood and optimized in a targeted manner.

History

CodeCharta is a project of MaibornWolff GmbH[source], whose development started on March 17, 2017. The inspiration for the project came from CodeCity[source], which represents source code files as buildings and is a form of software visualization(link).

CodeCharta has been in continuous development since 2017, with new features being added and bugs being fixed at regular intervals. As of January 15, 2025, there have been 219 releases[source].

The name 'CodeCharta' is a combination of the English word Code and the Latin word Charta (paper) and is intended to represent a 'code map'.

Usage

CodeCharta was developed to make code that is difficult to understand and code quality(link) tangible and comprehensible. The complexity of many projects is often difficult to grasp. To support users, CodeCharta presents the code as a kind of city. CodeCharta is primarily used to analyze and evaluate software architectures(link). The representation makes it possible to identify code locations that may be hotspots and require in-depth analysis. CodeCharta can therefore be used for software health checks and due diligence(link). The overview shortens the analysis and access to the code base.

In addition, developers can use it to better understand legacy systems(link) and thus visualize(link) their progress in modernization(link) and refactoring(link). As the analysis component is a console application(link), it can be easily integrated into Gitlab(link) Pipelines or Github(link) Actions, for example.

Components

CodeCharta has two main components. These are the analysis and the visualization. The main task of the two components is to convert metrics into CodeCharta's own cc.json format and then display them in the browser as a kind of city.

Analysis

Analysis is a console application whose task is to parse metrics from code, import them from other tools and then convert them into cc.json format.

Importer

The importers allow importing from various sources. This enables the use of different tools that are capable of parsing and analyzing code and thus generating metrics. The tools that can be used to analyze code include SonarQube(link), Tokei(link), Code Maat(link) and SourceMonitor(link). It is also possible to display the metrics exported by these tools in CodeCharta. The importer also allows CSV files to be imported. Although CSV files are not a tool for data analysis and parsing, they can be displayed and imported.

Parser

The parsers extract significant information from the code or alternative sources and subject it to independent processing. In contrast to the importers, CodeCharta performs the majority of this task. The parsers include source code, raw text, Git log(link) and SVN log(link) parsers.

cc.json Format

type FileNode = {
    name: "File",
    type: string,
    attributes: Attributes,
    "link": string,
    "children": []
}

type FolderNode = {
    "name": string,
    "type": "Folder",
    "link": string,
    "attributes": Attributes,
    "children": Node[]
}

type Attributes = { [key: string]: number }
type Edge = { fromNodeName: string, toNodeName: string, attributes: Attributes }
type Node = FileNode | FolderNode

type CodeChartaMap = {
    data: {
        projectName: string;
        nodes: Node[];
        apiVersion: string;
        edges: Edge[],
        attributeTypes: {
            nodes?: {
                [key: string]: "relative" | "absolute"
            },
            edges?: {
                [key: string]: "relative" | "absolute"
            }
        }
        attributeDescriptors: {
            [key: string]: {
                title: string,
                description: string,
                hintLowValue: string,
                hintHighValue: string,
                link: string
            }
        },
        "blacklist": unknown[]

    }
    checksum: string
}

CodeCharta allows 3D models to be exported and printed. This makes the code tangible.

Visualization

Visualization is a web application that was developed using Angular and TypeScript. It can be hosted independently and is also available on the Github Pages as a web studio[src]. It is possible to import the cc.json format. This allows the metrics generated by the analysis to be displayed.

Individual source code files are displayed as buildings. The height, area and color are represented by different metrics provided by the analysis. The user has control over the metrics and can change them, creating an intuitive and simple representation of the code base.

In addition, these maps can be downloaded as a 3D model and printed with the necessary equipment. This approach makes it possible to present a tangible representation of a codebase in presentations.

Versioning

CodeCharta uses Semantic Versioning(link)

Mentions

.NET Rocks! Grasping Code Quality with Richard Gross^[1]

License

CodeCharta uses the FreeBSD-License BSD-3-Clause

Christian Hühn

Inhaltsverzeichnis