<style>/*<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5766384501570070660&zx=e1d196d2-2453-44ff-961c-cd142b244bb1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5766384501570070660&zx=e1d196d2-2453-44ff-961c-cd142b244bb1' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1010354455151231&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1010354455151231 -->

</head><body>*/</style>

Make Nice-looking interactive diagrams for KiCAD PCBs with Pinion

10 Oct, 2022

Pinion is a simple tool that allows you to create visually appealing pinout diagrams for your KiCAD PCBs, such as this demo. To make it clear what is documentation and what is a diagram, we put it inside a frame in production, which you can seamlessly incorporate into your page.

The diagrams are static HTML and Javascript files that can be easily integrated into your documentation. Because you don't need a backend, you can easily serve them on your website or Github pages. It's really that simple!

More info about Pinion, how to install, and make diagram follow the link below:

Pinion - KiCAD interactive diagram

Add Comment

<style>/*
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6Zi5MYInMCUEW4lgOialRjwtqeLw:1732380231393';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5766384501570070660','//kicadrookie.blogspot.com/2022/10/make-nice-looking-interactive-diagrams_99.html','5766384501570070660');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5766384501570070660', 'title': 'KiCad Rookie', 'url': 'https://kicadrookie.blogspot.com/2022/10/make-nice-looking-interactive-diagrams_99.html', 'canonicalUrl': 'https://kicadrookie.blogspot.com/2022/10/make-nice-looking-interactive-diagrams_99.html', 'homepageUrl': 'https://kicadrookie.blogspot.com/', 'searchUrl': 'https://kicadrookie.blogspot.com/search', 'canonicalHomepageUrl': 'https://kicadrookie.blogspot.com/', 'blogspotFaviconUrl': 'https://kicadrookie.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-221442211-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22KiCad Rookie - Atom\x22 href\x3d\x22https://kicadrookie.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22KiCad Rookie - RSS\x22 href\x3d\x22https://kicadrookie.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22KiCad Rookie - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5766384501570070660/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22KiCad Rookie - Atom\x22 href\x3d\x22https://kicadrookie.blogspot.com/feeds/5720577619886735511/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1010354455151231', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d78375fb222d99b3', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '5720577619886735511', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNJoCbtN483AljUq1F_0DLkVMdSSSxC2hNF3TyTo2gezosq1AWxSUGiNuRz30mBqbXeoqDgUv3yWhrm2r1tveKO9_HWZZy7vjpy0pb0mkQW0uD25WgxlGZtduaNpgBG7b7mhBjw1tDAADqY6wW-y4OIXMuZ1I6BByP028hw4zJzsKZJSzh2JQDLrQ/s72-w640-c-h258/pinion.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNJoCbtN483AljUq1F_0DLkVMdSSSxC2hNF3TyTo2gezosq1AWxSUGiNuRz30mBqbXeoqDgUv3yWhrm2r1tveKO9_HWZZy7vjpy0pb0mkQW0uD25WgxlGZtduaNpgBG7b7mhBjw1tDAADqY6wW-y4OIXMuZ1I6BByP028hw4zJzsKZJSzh2JQDLrQ/w640-h258/pinion.png', 'pageName': 'Make Nice-looking interactive diagrams for KiCAD PCBs with Pinion', 'pageTitle': 'KiCad Rookie: Make Nice-looking interactive diagrams for KiCAD PCBs with Pinion', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Make Nice-looking interactive diagrams for KiCAD PCBs with Pinion', 'description': 'KiCad custom library, 3D Models, and KiCad projects download', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNJoCbtN483AljUq1F_0DLkVMdSSSxC2hNF3TyTo2gezosq1AWxSUGiNuRz30mBqbXeoqDgUv3yWhrm2r1tveKO9_HWZZy7vjpy0pb0mkQW0uD25WgxlGZtduaNpgBG7b7mhBjw1tDAADqY6wW-y4OIXMuZ1I6BByP028hw4zJzsKZJSzh2JQDLrQ/w640-h258/pinion.png', 'url': 'https://kicadrookie.blogspot.com/2022/10/make-nice-looking-interactive-diagrams_99.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 5720577619886735511}}, {'name': 'widgets', 'data': [{'title': 'Upload Image', 'type': 'Image', 'sectionId': 'upload-image', 'id': 'Image10'}, {'title': 'KiCAD Rookie', 'type': 'HTML', 'sectionId': 'header-main', 'id': 'HTML10'}, {'title': 'Icons, Dark, Search', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList10'}, {'title': 'Menu', 'type': 'LinkList', 'sectionId': 'header-main', 'id': 'LinkList11'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'before-blog', 'id': 'HTML11'}, {'title': 'Featured Project / Tutorial', 'type': 'FeaturedPost', 'sectionId': 'before-blog', 'id': 'FeaturedPost1', 'postId': '7686617374350360573'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'blog-post', 'id': 'Blog1', 'posts': [{'id': '5720577619886735511', 'title': 'Make Nice-looking interactive diagrams for KiCAD PCBs with Pinion', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDNJoCbtN483AljUq1F_0DLkVMdSSSxC2hNF3TyTo2gezosq1AWxSUGiNuRz30mBqbXeoqDgUv3yWhrm2r1tveKO9_HWZZy7vjpy0pb0mkQW0uD25WgxlGZtduaNpgBG7b7mhBjw1tDAADqY6wW-y4OIXMuZ1I6BByP028hw4zJzsKZJSzh2JQDLrQ/w640-h258/pinion.png', 'showInlineAds': true}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Tags'}]}], 'allBylineItems': [{'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': 'd MMM, yyyy'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': 'Tags'}]}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML13'}, {'title': '#You may also like', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML15'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'ads-post', 'id': 'HTML14'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'after-blog', 'id': 'HTML18'}, {'title': '', 'type': 'HTML', 'sectionId': 'sidebar-static', 'id': 'HTML1'}, {'title': 'Trending this week', 'type': 'PopularPosts', 'sectionId': 'sidebar-static', 'id': 'PopularPosts10', 'posts': [{'title': 'TP4056 Module KiCad Custom Footprint', 'id': 6509089752259825786}, {'title': 'KiCad Footprint and 3D Asset of 0.96 Inch 80x160 LCD Screen ST7735 SPI Display Module', 'id': 1200361690122367252}, {'title': 'TP4056 Module KiCad 3D Asset', 'id': 9220180907908127857}, {'title': 'KiCAD Project: MiniDexed Hat for Raspberry Pi', 'id': 453464043335187727}, {'title': 'Adafruit Huzzah32 3D Model Asset', 'id': 1837116084449455507}, {'title': 'KiCad Custom Footprint Arduino Nano RP2040 Connect', 'id': 2476486490360116249}, {'title': 'Adafruit ADS1115/ ADS1015 KiCad Custom Footprint', 'id': 5797503657798116616}, {'title': 'ShaRPIKeebo - A tiny Raspberry Linux computer with a keyboard, a daylight-readable screen, and a long-range transceiver', 'id': 6955025259357202317}, {'title': 'RP2040 Zero KiCad Custom Symbol', 'id': 1907861695986648074}, {'title': 'Experience High-Quality Audio On-The-Go with Sam Feine\x26#39;s USB Audio DAC / Headphone Amplifier', 'id': 3348182462761060682}]}, {'title': 'Categories', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label10'}, {'title': 'Hashtag', 'type': 'Label', 'sectionId': 'sidebar-static', 'id': 'Label11'}, {'title': 'Blog Archive', 'type': 'BlogArchive', 'sectionId': 'sidebar-static', 'id': 'BlogArchive10'}, {'title': '#Advertisement', 'type': 'HTML', 'sectionId': 'sidebar-sticky', 'id': 'HTML20'}, {'title': 'About Us', 'type': 'HTML', 'sectionId': 'footer-widget', 'id': 'HTML21'}, {'title': 'Follow Us', 'type': 'LinkList', 'sectionId': 'footer-widget', 'id': 'LinkList14'}, {'title': 'Copyright', 'type': 'HTML', 'sectionId': 'copyright', 'id': 'HTML23'}, {'title': 'SVG Icons', 'type': 'HTML', 'sectionId': 'jet-options', 'id': 'HTML24'}]}]);
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image10', 'upload-image', document.getElementById('Image10'), {'resize': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML10', 'header-main', document.getElementById('HTML10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'header-main', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList11', 'header-main', document.getElementById('LinkList11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'before-blog', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'before-blog', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'blog-post', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2646514562-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML13', 'ads-post', document.getElementById('HTML13'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML15', 'ads-post', document.getElementById('HTML15'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML14', 'ads-post', document.getElementById('HTML14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML18', 'after-blog', document.getElementById('HTML18'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'sidebar-static', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts10', 'sidebar-static', document.getElementById('PopularPosts10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label10', 'sidebar-static', document.getElementById('Label10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label11', 'sidebar-static', document.getElementById('Label11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive10', 'sidebar-static', document.getElementById('BlogArchive10'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML20', 'sidebar-sticky', document.getElementById('HTML20'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'footer-widget', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList14', 'footer-widget', document.getElementById('LinkList14'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML23', 'copyright', document.getElementById('HTML23'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML24', 'jet-options', document.getElementById('HTML24'), {}, 'displayModeFull'));
</script>
</body>*/</style>