Swift code types navigator

Software visualization gives an overview of the current state of your codebase. With it, you can onboard new team members faster, but also refresh your knowledge on an older code. There are tools that generate diagrams, graphs and other types of visualizations for most programming languages.

For Swift, we have this great tool for creating class diagrams. The same dream team that created that tool has now gathered to create a new tool, that will give a different view to your code.

Introducing Swift code types navigator, which with a simple command, creates an html file that visualizes your Swift code.

When you first open the html file, you get a zoomed out bubbles which represent all the types you use in your iOS app: classes, structs, protocols etc. When you zoom in, the names of the classes start to appear. When you click on a bubble, it displays the properties and methods of that class. If you hover one bubble, you get information about the type of a variable, the parameters that a method accepts, as well as a return type.

While the first tool used Ruby scripts to parse the Swift code as strings, this one uses Swift Abstract Syntax Tree parser. Abstract Syntax Tree is a tree representation of the abstract syntactic structure of source code written in a programming language (source).

What this means is that this tool is faster and more accurate. Parsing the code as a text is much slower and error prone. With that approach, if syntax is changed, or you have missed some case, then the scripts would fail. This new tool is much faster and more accurate. It also has nicer coloured visuals and a legend.

To use this tool you need the following steps:

Clone the git repo:

git clone https://github.com/yoshimkd/swift-code-types-navigator your_local_folder

Build the tool, by running the following command in the tool’s root directory:

swift build

Run the type navigator, by typing the following command, with path/s to your Swift code:

.build/debug/SwiftDiagramGenerator . <swiftFileOrFolderPath1> <swiftFileOrFolderPath2> ...

And that’s everything you need to have this kind of visualisation of your Swift code. You can navigate through the types, see their properties and functions and drag them around. Onboarding the new team members and explaining the concepts would be much easier now.

swift-code-types-navigator-demo.gif

This is the result for the code of Canvas File Explorer for Mac.

Initial contributors:

https://github.com/yoshimkd
https://github.com/ZdravkoN
https://github.com/martinmitrevski

Future Steps

One nice addition would be to be able to draw rectangles that will be containers for group of classes. This will make the tool very suitable for representing your app’s architecture. Also, there should be an option to show connections between the classes, optionally per type. Having all the connections will just clutter the diagram, but having a setting that will show connections for a given type would be very cool improvement.

Feedback

What do you think about this tool? Would you use it in your projects? We would love to hear your feedback. Also feel free to join us and contribute.

5 thoughts on “Swift code types navigator

    1. Please make sure that you first have run the command “swift build” in the tool’s directory. Also, check that you are running the command from the tool’s root directory: .build/debug/SwiftDiagramGenerator . …

      Like

  1. After run .build/debug/SwiftDiagramGenerator . ….., some of my swift class will show「Can’t parse file path:XXXXX」and the diagram is not created.

    Here is my NG sample class:

    class TestUML: NSObject {
    @IBOutlet weak private var button: UIButton!
    var testVar: String?;
    func function1() -> Bool {
    return true;
    }
    }

    BUT、if I remove the third line and excute the command line again、diagram will be created without error.

    // OK Sample class
    class TestUML: NSObject {
    @IBOutlet weak private var button: UIButton!

    func function1() -> Bool {
    return true;
    }
    }

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s