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.
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.
martinmitrevski 
error: rootManifestFileNotFound
Getting this error.
LikeLike
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 . …
LikeLike
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;
}
}
LikeLike
thanks for the feedback. Can you please report the issue here: https://github.com/yoshimkd/swift-code-types-navigator/issues ?
LikeLike
Hello, Theres a tool for creating code from class diagram ?
Can you help me? Please?
LikeLike
Yes, you can find more info here: https://martinmitrevski.com/2016/10/12/swift-class-diagrams-and-more/
LikeLike
Very quick and looks to be thorough, but I prefer the old UML class diagram, much more straightforward. I’m also not a fan of the floating bubbles. Makes it difficult to read and see what’s going on. Would not recommend for complicated projects, mine looks like a ball of tangled wires and it’s going to take longer to drag them apart and organize them than for me to begin documenting the part I’m interested in myself.
LikeLike